Fluent UI ComboBox allowFreeform

Question

I have issues with a controlled ComboBox in fluentui from ms. I not been able to insert my own text, after insert and press enter the text disappears. The option selection works without problems.

Here a codepen: https://codepen.io/verhext/pen/jOrKOPe

 <ComboBox
    componentRef={comboBoxRef}
    defaultValue={selectedKey}
    selectedKey={selectedKey}
    label="Basic ComboBox"
    allowFreeform
    autoComplete="on"
    options={comboBoxBasicOptions}
  onChange={onChange}
/>

I don't know what I'm doing wrong in my code.
Thank you!

When you start typing "Opt..." component suggest an item to select. Otherwise you cant select something that suggestion list doesn't include. — Marko Savic, Nov 05 '20 at 13:25
Okay, but how handle Microsoft Teams that case. There is a ComboBox for calendar event start and end time and I'm able to insert a time in format hh:mm or select one of the DropDown Options. — VerHext, Nov 05 '20 at 16:06
Microsoft Teams uses react-northstar library. https://fluentsite.z22.web.core.windows.net/0.51.2/quick-start — Marko Savic, Nov 05 '20 at 17:40

score 3 · Answer 1 · answered May 14 '21 at 10:04

Here is the way... Basically onChange event has four parameters.. "value" contains the typed in text. "selectedOption" would be undefined when there was no matching key/value. You can use "text" property to assign the value back to the control.

private onComboBoxChange = (selectedOption: any, value: string): void => {
    let v = value;
    if (selectedOption) {
        v = selectedOption.key;
    }
    this.props.onStateChange(v);
} 

<ComboBox allowFreeform={true} autoComplete={'on'}
          options={this.props.options} 
          onChange={(e, selectedOption, i, value) => { this.onComboBoxChange(selectedOption, value); }}                            
          text={<value>} />

score -1 · Accepted Answer · answered Nov 05 '20 at 13:20

-1

Combobox doesn't allow you to select any text value. allowFreeForm prop means that you can use manual search to select items.

answered Nov 05 '20 at 13:20

Alexander Sakhatskii

664
1
6
11

`allowFreeInput` restricts input to only matching options. `allowFreeform` allows user to input any value without restricting to provided options. https://developer.microsoft.com/en-us/fluentui#/controls/web/combobox – PMontgomery Feb 23 '23 at 00:37

Fluent UI ComboBox allowFreeform

2 Answers2