[Bug]: Combobox doesn't support preventSelectOnSpace

andreasbalzer commented 3 weeks ago

Library

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

System Info

"@fluentui/react-components": "^9.54.0",
    "@fluentui/react-hooks": "^8.2.1",
    "@fluentui/react-icons": "^2.0.175",
    "@fluentui/react-teaching-popover": "^9.1.1",

Are you reporting an Accessibility issue?

no

Reproduction

see description

Bug Description

Actual Behavior

I saw on https://develop.fluentui.dev/components/web/react/combobox/usage#:~:text=Generally%2C%20people%20navigating%20via%20keyboard%20can%20use%20the,these%20cases%2C%20set%20the%20preventSelectOnSpace%20prop%20to%20true. that Combobox used-to/should support preventSelectOnSpace. However, attempting to use it with "@fluentui/react-components": "^9.54.0", yields an error message Property 'preventSelectOnSpace' does not exist on type 'IntrinsicAttributes & Omit<ComponentProps<Partial, "input">, "children" | "size"> & ... 5 more ... & RefAttributes<...>'.ts(2322)

My use case is to show a Combobox of Active Directory group names. When they contain spaces and users try to type these, Combobox select a group rather than adding the space to the group name typed.

Reproduction:

Expected Behavior

preventSelectOnSpace should be an allowed prop to Combobox, making it not select an item on space input.

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

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

TristanWatanabe commented 3 weeks ago

This looks to be a documentation issue as preventSelectOnSpace was never implemented according to #25724 (see quote below). To address this issue specifically, we should update the website to remove the snippet regarding using preventSelectOnSpace

~Use preventSelectOnSpace prop ONLY when most or all options will have a space, and typing the space is required and expected~ decision: hold off on preventSelectOnSpace unless/until someone requests it as a feature

@smhigley can you confirm that the above is still true and that there are still no plans to implement this prop as of now?

smhigley commented 3 weeks ago

The current behavior is that you can insert a space character while typing into the Combobox input, but if you start arrowing between options, space will select. If you start typing again, you can insert a space character; the select-on-space behavior only happens if the user has most recently used the keyboard to navigate options.

There isn't currently a prop to override that behavior, since it's not as simple as selecting on space vs. not. If there are cases where this behavior isn't working, I'd love to hear specifics so we can refine the behavior as needed.

microsoft / fluentui