Word.Range.insertContentControl(type) will always insert RichText content control regardless of type argument

[Metab0i]

Article URL

Describe the problem
Regardless of what API consumer passes to Word.Range.insertContentControl(…), it will always insert a RichText content control.

What was attempted to arrive at this conclusion:

• Attempted to use a member of Word.ContentControlType enum - didn’t work
• Attempted to pass a string argument (“CheckBox”, “DropDownList”, “ComboBox”) - didn’t work
• Ran isolated experiment - didn’t work

API version: ^1.1.86

Screenshots
-/-

[AlexJerabek]

Hi @Metab0i,

Thank you for reporting this issue. @ElizabethSamuel-MSFT, could you please investigate?

[ElizabethSamuel-MSFT]

@Metab0i Thanks for reaching out. Can you let us know what client and build/version of Word is being used? Thanks.

[ElizabethSamuel-MSFT]

@Metab0i The following are a few samples you can try in our Script Lab tool that use Range.insertContentControl(type).

• Manage checkbox content controls
• Manage combo box content controls
• Manage dropdown list content controls

Also let us know the outcome of your trying these out.

Thanks.

[Metab0i]

@ElizabethSamuel-MSFT, thank you for a prompt response.

"... what client and build/version of Word is being used?"
MSO (Version 2501 Build 16.0.18429.20132) 64-bit

"...let us know the outcome of your trying these out."
HTML

html body...
    <div class="container" style="display: flex; flex-direction: column; gap: 0.5rem;">
      <button id="insertCheckBoxCC" type="button" class="btn btn-primary" style="font-size: x-small;">Insert Checkbox Content Control</button>
      <button id="insertComboBoxCC" type="button" class="btn btn-primary" style="font-size: x-small;">Insert Combo-box Content Control</button>
      <button id="insertDropdownListCC" type="button" class="btn btn-primary" style="font-size: x-small;">Insert Dropdown-List Content Control</button>
    </div>

Script

Office.onReady(async (info) => {
      if(info.host !== Office.HostType.Word) return console.error('Wrong Host Enviornment. Expected Microsoft Word.');

      document.querySelector('#insertCheckBoxCC')
        .addEventListener("click", async function(_evnt){
          await Word.run(async (context) => {
            let selection = context.document.getSelection();
            selection.getRange(Word.RangeLocation.end).insertContentControl(Word.ContentControlType.checkBox);
            await context.sync();

            console.log("Check-box content control inserted at the end of the selection.");
          });
        })
      
      document.querySelector('#insertComboBoxCC')
        .addEventListener("click", async function(_evnt){
          await Word.run(async (context) => {
            let selection = context.document.getSelection();
            selection.getRange(Word.RangeLocation.end).insertContentControl(Word.ContentControlType.comboBox);
            await context.sync();

            console.log("Combo-box content control inserted at the end of the selection.");
          });
        })

      document.querySelector('#insertDropdownListCC')
        .addEventListener("click", async function(_evnt){
          await Word.run(async (context) => {
            let selection = context.document.getSelection();
            selection.getRange(Word.RangeLocation.end).insertContentControl(Word.ContentControlType.dropDownList);
            await context.sync();

            console.log("Dropdown list content control inserted at the end of the selection.");
          });
        })
}

Outcome:

Media1.mp4

[Metab0i]

For additional context, here are properties of a content control that was supposed to be a Combo box; There's no list properties section

[ElizabethSamuel-MSFT]

When I tried out your code, I got the following behavior.

I'll transfer this to the office-js repo for the product team to investigate further.

Thanks.