fix(AutoComplete): skip disabled options in keyboard navigation - #1184
fix(AutoComplete): skip disabled options in keyboard navigation#1184fallintoplace wants to merge 1 commit into
Conversation
🦋 Changeset detectedLatest commit: 2385f13 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
🟡 Changes recommended
updateList can accumulate stale entries in its navigable/visible refs across option updates, which can cause incorrect highlighting/selection after props change.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR fixes AutoComplete keyboard navigation so disabled options are not highlighted/selected via Arrow keys + Enter, aligning keyboard behavior with existing mouse-selection constraints.
Changes:
- Exclude disabled options from the keyboard-navigable list used for highlight/selection.
- Highlight the first enabled option when the popover opens.
- Add regression tests covering grouped + flat options and the “first option disabled” case.
File summaries
| File | Description |
|---|---|
| src/components/AutoComplete/AutoComplete.tsx | Builds navigable option list excluding disabled options and initializes highlight from the first enabled option on open. |
| src/components/AutoComplete/AutoComplete.test.tsx | Adds keyboard-navigation regression tests ensuring disabled options are skipped and first-enabled is selected. |
| .changeset/fix-autocomplete-disabled-options.md | Adds a patch changeset describing the keyboard-selection fix. |
Review details
- Files reviewed: 3/3 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| visibleList.current.push(item.value); | ||
| if (!disabled) { | ||
| if (!item.disabled) { | ||
| navigatable.current.push(item.value); | ||
| } |
What changed
Why
Disabled options could be highlighted and selected with Arrow keys + Enter.
Mouse selection already blocked this, but the keyboard path did not.
Checks