Skip to content

feat: implement AutocompleteArrayInput component#143

Open
Copilot wants to merge 2 commits into
mainfrom
copilot/implement-autocomplete-array-input
Open

feat: implement AutocompleteArrayInput component#143
Copilot wants to merge 2 commits into
mainfrom
copilot/implement-autocomplete-array-input

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 12, 2026

Adds a multi-select autocomplete input component for array-valued fields, backed by ra-core's useInput and useChoicesContext hooks with client-side filtering via the q filter key.

Component

  • packages/registry/src/form/autocomplete-array-input.tsx — Renders selected values as removable chips + a searchable combobox input. Filters availableChoices client-side via setFilters({ 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.
<AutocompleteArrayInput
  source="tag_ids"
  choices={[
    { id: 1, name: 'Sports' },
    { id: 2, name: 'Tech' },
  ]}
  label="Tags"
/>

Supporting files

  • registry.json — registers autocomplete-array-input
  • form.test.tsx — 8 new tests: label rendering, dropdown open/filter behavior, chip add/remove, placeholder
  • form.stories.tsx — two stories: basic usage and pre-selected values
  • apps/demo — synced via radish add autocomplete-array-input

Copilot AI linked an issue Apr 12, 2026 that may be closed by this pull request
Copilot AI changed the title [WIP] Add AutocompleteArrayInput component for multi-selection feat: implement AutocompleteArrayInput component Apr 12, 2026
Copilot AI requested a review from saebyn April 12, 2026 22:32
@saebyn saebyn marked this pull request as ready for review April 13, 2026 02:27
Copilot AI review requested due to automatic review settings April 13, 2026 02:27
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 AutocompleteArrayInput component (registry + synced demo copy) with chip UI and client-side filtering via useChoicesContext.
  • Added Storybook stories and Vitest coverage for the new input.
  • Registered the component in registry.json and updated the demo radish.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]);
}
};
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.

Implement AutocompleteArrayInput component

3 participants