Skip to content

fix: select multiselect listbox alignment - #5208

Draft
amanabiy wants to merge 10 commits into
feat/add-option-listfrom
fix/select-multiselect-listbox-alignment
Draft

amanabiy wants to merge 10 commits into
feat/add-option-listfrom
fix/select-multiselect-listbox-alignment

Conversation

@amanabiy

Copy link
Copy Markdown
Member

Description

Related links, issue #, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@amanabiy
amanabiy changed the base branch from main to refactor/move-shared-listbox-parts October 29, 2026 17:50
@amanabiy
amanabiy added this pull request to stack #5209 October 29, 2026 17:50
@amanabiy
amanabiy removed this pull request from stack #5209 October 29, 2026 17:51
@amanabiy
amanabiy added this pull request to stack #5210 October 29, 2026 17:53
@amanabiy amanabiy changed the title Fix/select multiselect listbox alignment fix: select multiselect listbox alignment Oct 29, 2026
@amanabiy
amanabiy removed this pull request from stack #5210 October 30, 2026 10:18
@amanabiy
amanabiy force-pushed the fix/select-multiselect-listbox-alignment branch from 655a821 to 24a3847 Compare November 2, 2026 10:46
@amanabiy
amanabiy changed the base branch from refactor/move-shared-listbox-parts to feat/add-option-list November 2, 2026 10:47
Select and Multiselect built the parent group item of renderOption with the option's disabled state instead of the group's. In an enabled group with one disabled option, that option's renderer got item.parent.disabled === true while its sibling got false for the same group. Use the group's own disabled state in both components.
With renderOption, a disabled option kept aria-describedby pointing to its disabled reason, but the hidden description element wasn't rendered, so the reference was dangling and screen readers couldn't announce the reason. Keep the hidden description mounted for custom content in Select and Multiselect. The tooltip stays limited to the default content.
When the dropdown list has focus, Home and End moved the highlight but the browser also ran its native action, scrolling the page or scroll container to the top or bottom. Prevent the native action when there is no filter. With a filter, focus is in the input, so Home and End keep moving the text cursor.
Without interactive groups, group headers can't be highlighted, and an empty group leaves a header row at the start or end of the list. ArrowUp and ArrowDown checked the raw first and last rows, so they didn't wrap and the highlight got stuck. Check against the first and last highlightable options instead.
With interactive groups, a group can share its value with one of its options. Repeating a character looked up the current highlight by value, found the group header first, and moved to the option that was already highlighted, so cycling got stuck. Find the highlight by identity instead, and fall back to the value when the highlight isn't one of the given objects. Select passes its selectedOption prop while the dropdown is closed, which can be an equal copy.

Identity is safe: useSelect takes highlightedOption from options[highlightedIndex] in useHighlightedOption, Multiselect passes that same visibleOptions array to useTypeAhead, and findMatchingOption filters the array without copying its entries.
@amanabiy
amanabiy force-pushed the fix/select-multiselect-listbox-alignment branch from a47f825 to 617320f Compare November 2, 2026 10:51
@amanabiy
amanabiy changed the base branch from feat/add-option-list to main November 2, 2026 10:51
@amanabiy
amanabiy changed the base branch from main to feat/add-option-list November 2, 2026 12:01
@amanabiy
amanabiy changed the base branch from feat/add-option-list to main November 2, 2026 12:01
The arrow-key wrap fix removed highlightedOption from the shared getListboxNavigation props. useListbox still passed it, which failed type checking.
@codecov

codecov Bot commented Nov 2, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.80%. Comparing base (f06a65f) to head (f4e7628).

Additional details and impacted files
@@                   Coverage Diff                    @@
##           feat/add-option-list    #5208      +/-   ##
========================================================
+ Coverage                 97.78%   97.80%   +0.02%     
========================================================
  Files                      1009     1009              
  Lines                     32781    32787       +6     
  Branches                  12152    12152              
========================================================
+ Hits                      32055    32068      +13     
+ Misses                      720      713       -7     
  Partials                      6        6              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

This branch was successfully deployed

3 active deployments
dev-pages-react18 — f4e7628c Deployed Nov 2, 2026 by amanabiy via deploy (React 18) / deploy #3091
dev-pages-react16 — f4e7628c Deployed Nov 2, 2026 by amanabiy via deploy (React 16) / deploy #3091
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant