Skip to content

Epic: Combobox/Dropdown bug bash notes #26069

@smhigley

Description

@smhigley

Combobox

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 with useEventCallback on 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)

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions