-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Closed
Labels
Component: ComboboxFluent UI react-components (v9)Resolution: Soft CloseSoft closing inactive issues over a certain periodSoft closing inactive issues over a certain period
Description
Combobox
- Multiselect Combobox should always start Option focus at the top, regardless of selection fix: v9 Combobox option focus on open updates #26173
- Multiselect Combobox Option highlight is inconsistent when opening with a mouse – initially the active option is not visually focused when opened, but after selecting multiple options it does get visual focus when opened with a mouse. fix: v9 Combobox option focus on open updates #26173
- Add cursor: pointer for the chevron fix: button semantics for Combobox chevron, and pointer styles #26075
- Add button semantics to chevron for Android Talkback fix: button semantics for Combobox chevron, and pointer styles #26075
- When disabled, clicking the chevron still opens the combobox fix: Select disabled state hover style, Combobox disabled state open on chevron click #26068
- Add aria-owns pointing to listbox id fix: add aria-owns to react-combobox non-inline popups #26246
Dropdown
- Multiselect Dropdown should always start Option focus at the top, regardless of selection fix: v9 Combobox option focus on open updates #26173
- The page scrolls when pressing ArrowUp with the top item focused, or ArrowDown with the bottom item focused. Holding an arrow key down can cause the dropdown to scroll out of view. Also happens with Home/End and PageUp/PageDown.
- Scrolling the entire dropdown out of view on the page, then pressing arrow key doesn't scroll the dropdown back into view. Should it?
- When the whole Dropdown is disabled, it still has the “pointer” mouse cursor, and text isn't grey. fix: Select disabled state hover style, Combobox disabled state open on chevron click #26068
- No default max height -- the popover doesn’t scroll and just continues offscreen when there are many items in the dropdown. Design feedback -- max-height of 80vh. fix: react-combobox add listbox max-height and shift shadow style location #26470
- Perf: in useCombobox.tsx, popupWidth creates a new object every render and sets this on listbox, forcing a re-render even though popupWidth probably doesn’t change all that much. One way to avoid this is to change popupWidth to an object called popupStyle and maintain the style object in state as this object won’t change unless the actual with changes. fix: react-combobox perf improvements #26191
- Perf: in useTriggerListboxSlots.ts, the onClick, onMouseOver and onMouseDown callbacks are recreated every render. It’s not straightforward to memoize these callbacks since they are conditionally called but we could make them unconditionally called by doing something like
const lb = listbox ?? {}and then setting all the callbacks withuseEventCallbackon lb. This is definitely a bit hacky and there may be another, better way to do this but it does eliminate re-renders. fix: react-combobox perf improvements #26191
Examples/Docs
- Complex Options “Options can have structured JSX children” implies that Options can be something other than JSX children? Maybe "The options for a Combobox are defined as JSX children." fix: react-combobox story fixes and docs wording updates #26471
- Custom Options (documentation) “Options and OptionGroups can be extended and customized.” fix: react-combobox story fixes and docs wording updates #26471
This probably isn’t enough information. The example shows grouped options like in the Grouped example section, but I wasn’t sure what customization is going on here. - Custom Options (example): the type is Partial but ony the label is used. Either spread the props into the option group, or just pick the label. 26471
- “Default” example – Caterpillar is misspelled. 26471
- Custom options: instead of changing styles, the OptionGroup will add a line of descriptive text under the label, and we’ll show how to extend Option by creating a Select All option.
- Add example for buttons in the footer (e.g. "Load more") using Option elements for both single and multiselect combo & dropdown (people will do it, so better to show how)
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
Component: ComboboxFluent UI react-components (v9)Resolution: Soft CloseSoft closing inactive issues over a certain periodSoft closing inactive issues over a certain period