Skip to content

refactor(toolbar): show attribute suggestions as a combobox instead of a datalist#62

Open
sarahdayan wants to merge 1 commit intomainfrom
refactor/combobox-primitive
Open

refactor(toolbar): show attribute suggestions as a combobox instead of a datalist#62
sarahdayan wants to merge 1 commit intomainfrom
refactor/combobox-primitive

Conversation

@sarahdayan
Copy link
Member

@sarahdayan sarahdayan commented Feb 27, 2026

Summary

Item template fields suggest index attributes so the user doesn't have to type them from memory. Until now, suggestions used a native <datalist>, which varies across browsers, can't be keyboard-navigated reliably, and doesn't filter as you type in all environments.

This PR replaces the datalist with a proper combobox dropdown:

  • Filterable list: typing narrows suggestions in real time
  • Keyboard navigation: Arrow keys, Enter to select, Escape to dismiss
  • Accessible: role="combobox", role="listbox", aria-activedescendant for screen readers

The combobox logic is extracted into a reusable Combobox primitive (ui/combobox.tsx) so PRs #60 and #61 can adopt it for AttributeField and AgentIdField instead of duplicating the same dropdown behavior.

…ibute suggestions

Extract a reusable Combobox primitive with keyboard navigation and ARIA
attributes, and use it in ItemTemplateField instead of the native datalist.
Remove the now-unused `list` prop from TextField.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@netlify
Copy link

netlify bot commented Feb 27, 2026

Deploy Preview for algolia-experiences-js ready!

Name Link
🔨 Latest commit 9fa63bc
🔍 Latest deploy log https://app.netlify.com/projects/algolia-experiences-js/deploys/69a1b06c9dd0250008b73e8e
😎 Deploy Preview https://deploy-preview-62--algolia-experiences-js.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@sarahdayan sarahdayan changed the title refactor(toolbar): replace datalist with accessible combobox for attribute suggestions refactor(toolbar): show attribute suggestions as a combobox instead of a datalist Feb 27, 2026
@netlify
Copy link

netlify bot commented Feb 27, 2026

Deploy Preview for algolia-experiences-react ready!

Name Link
🔨 Latest commit 9fa63bc
🔍 Latest deploy log https://app.netlify.com/projects/algolia-experiences-react/deploys/69a1b06cda00e700088d9733
😎 Deploy Preview https://deploy-preview-62--algolia-experiences-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@sarahdayan sarahdayan requested a review from dhayab February 27, 2026 14:58
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