Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
    Memory: 7.05 GB / 15.67 GB
  Browsers:
    Chrome: 101.0.4951.64
    Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.29)
    Internet Explorer: 11.0.19041.1566

Are you reporting Accessibility issue?

No response

Reproduction

https://codesandbox.io/s/cocky-waterfall-goc5w8

Bug Description

Actual Behavior

1- When select an Option with a value, the value is displayed in the input.
2- The matching function searches in the value.
3- When freeform, hitting the space bar makes the list box close. You cannot type something with a space.

Expected Behavior

1- When select an Option with a value, the display text (child string value) is displayed in the input.
2- The matching function searches in the display text (child string value)
3- When freeform, you can type something that has a space in it.

<Combobox
    freeform
>
    <Option value="value1">This is the display text for 1</Option>
    <Option value="value2">This is the display text for 2</Option>
    <Option value="value3">This is the display text for 3</Option>
</Combobox>

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.