feat: implement AutocompleteArrayInput component#143
Open
Copilot wants to merge 2 commits into
Open
Conversation
Agent-Logs-Url: https://github.com/saebyn/radish-ui/sessions/66955120-ade8-48c3-8329-0a9d6f6ec8ce Co-authored-by: saebyn <185030+saebyn@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Add AutocompleteArrayInput component for multi-selection
feat: implement AutocompleteArrayInput component
Apr 12, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an AutocompleteArrayInput multi-select component to the registry (and synced demo) to support array-valued fields with chip rendering and an autocomplete dropdown, integrating with ra-core form/choices hooks.
Changes:
- Added
AutocompleteArrayInputcomponent (registry + synced demo copy) with chip UI and client-side filtering viauseChoicesContext. - Added Storybook stories and Vitest coverage for the new input.
- Registered the component in
registry.jsonand updated the demoradish.lock.json.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/registry/src/form/autocomplete-array-input.tsx | Introduces the new multi-select autocomplete input implementation. |
| packages/registry/src/form/form.test.tsx | Adds tests covering render, dropdown behavior, filtering, and chip add/remove. |
| packages/registry/src/form/form.stories.tsx | Adds stories demonstrating basic and pre-selected usage. |
| packages/registry/registry.json | Registers the new component in the registry catalog. |
| apps/demo/src/components/form/autocomplete-array-input.tsx | Demo app synced copy of the new component. |
| apps/demo/radish.lock.json | Adds lock entry for the new component sync. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+106
to
+114
| const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { | ||
| if (e.key === "Escape") { | ||
| setIsOpen(false); | ||
| } | ||
| // Backspace on empty input removes last selected item | ||
| if (e.key === "Backspace" && inputValue === "" && selectedValues.length > 0) { | ||
| handleRemove(selectedValues[selectedValues.length - 1]); | ||
| } | ||
| }; |
Comment on lines
+106
to
+114
| const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { | ||
| if (e.key === "Escape") { | ||
| setIsOpen(false); | ||
| } | ||
| // Backspace on empty input removes last selected item | ||
| if (e.key === "Backspace" && inputValue === "" && selectedValues.length > 0) { | ||
| handleRemove(selectedValues[selectedValues.length - 1]); | ||
| } | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a multi-select autocomplete input component for array-valued fields, backed by ra-core's
useInputanduseChoicesContexthooks with client-side filtering via theqfilter key.Component
packages/registry/src/form/autocomplete-array-input.tsx— Renders selected values as removable chips + a searchable combobox input. FiltersavailableChoicesclient-side viasetFilters({ q: value }). Supports Backspace to remove last chip, Escape to close dropdown. Full ARIA semantics (combobox,listbox,aria-multiselectable,aria-expanded). Dark mode via Tailwind semantic tokens.Supporting files
registry.json— registersautocomplete-array-inputform.test.tsx— 8 new tests: label rendering, dropdown open/filter behavior, chip add/remove, placeholderform.stories.tsx— two stories: basic usage and pre-selected valuesapps/demo— synced viaradish add autocomplete-array-input