Skip to content

[6.x] Improve the UX of taggable comboboxes - #15249

Open
duncanmcclean wants to merge 6 commits into
6.xfrom
combobox-taggable-improvements
Open

[6.x] Improve the UX of taggable comboboxes#15249
duncanmcclean wants to merge 6 commits into
6.xfrom
combobox-taggable-improvements

Conversation

@duncanmcclean

@duncanmcclean duncanmcclean commented Aug 24, 2026

Copy link
Copy Markdown
Member

This pull request improves the UX of taggable comboboxes.

  • The typed value now always appears as an Add "..." option at the top of the dropdown, alongside any matching options, rather than only when nothing matched. Since typing highlights the first option, it's always clear what pressing enter will do.
  • Tabbing into a taggable combobox now opens the dropdown, so the available options are visible right away.
  • Fixes an issue where tabbing onto a combobox focused the wrapping trigger element first, requiring a second tab to reach the search input.
    • This was happening because both the trigger and the search input were in the tab order.
    • I've fixed it by taking the trigger out of the tab order whenever the search input is visible.
  • Fixes an issue where pressing enter after arrowing to an option would add the raw typed text instead of the highlighted option.
    • This was happening because the enter handler always committed the typed text, running after Reka had already selected the highlighted option and overriding its selection.
    • I've fixed it by only committing the typed text when no option is highlighted.
  • Fixes an issue where adding a custom validation rule in the rule builder would silently fail in development builds.
    • This was happening because defineExpose unwraps refs, so the builder's added handler was reading searchQuery.value as undefined and throwing.
    • I've fixed it by reading the unwrapped value from the combobox ref.

This PR also renders the add option label in the relationship select and formatting locales fieldtypes, since they provide their own option templates.

Before

CleanShot.2026-08-24.at.14.50.51.mp4

After

CleanShot.2026-08-24.at.14.55.15.mp4

duncanmcclean and others added 6 commits August 24, 2026 11:40
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146FsnrtqFd6RhsnrEDf7Fy
…isible

The trigger and the input were both tabbable, so it took two presses of
the tab key to reach the input. The search query now only resets when the
dropdown closes, so a keystroke that opens the dropdown is not wiped.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146FsnrtqFd6RhsnrEDf7Fy
…ion on enter

Previously the typed value only appeared as an option when nothing
matched, and pressing enter always committed the raw typed text — even
after arrowing to an option in the list. The typed value now always shows
as an `Add "..."` option at the top of the list, and enter selects
whichever option is highlighted.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146FsnrtqFd6RhsnrEDf7Fy
Only keyboard focus from outside the component opens it — pointer
interactions leave opening to the trigger's own click handling, and
focus returning from a dropdown item is ignored so selecting an option
does not reopen it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146FsnrtqFd6RhsnrEDf7Fy
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146FsnrtqFd6RhsnrEDf7Fy
`defineExpose` unwraps refs, so `searchQuery.value` was `undefined` and
`hasUnfinishedParameters` threw inside the `added` handler. Previously the
rule had already been added by the time the error was swallowed; now
`added` is emitted before the selection lands, so the throw aborted it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146FsnrtqFd6RhsnrEDf7Fy
@duncanmcclean duncanmcclean changed the title [6.x] Improve taggable combobox keyboard behaviour [6.x] Improve the UX of taggable comboboxes Aug 24, 2026
@duncanmcclean
duncanmcclean marked this pull request as ready for review August 24, 2026 13:56
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