feat(input-dropdown): add inline search functionality#661
Draft
brc-dd wants to merge 18 commits into
Draft
Conversation
✅ Deploy Preview for sefirot-story ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for sefirot-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds inline search (autocomplete) functionality to the SInputDropdown component. The new feature allows users to type directly into the dropdown input to filter options using fuzzy search (via Fuse.js), similar to a combobox pattern. This complements the existing dropdown search functionality by providing a more interactive, keyboard-friendly search experience.
Key Changes:
- Added
search="inline"prop option that enables inline search mode with autocomplete-style filtering - Implemented keyboard navigation (ArrowUp/Down, Enter, Tab, Backspace) for selecting filtered options
- Added chip-style rendering for selected items in inline search mode with individual remove buttons
- Integrated Fuse.js for fuzzy search filtering of options
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
lib/composables/Dropdown.ts |
Extended DropdownSectionFilter interface to support search: boolean | 'inline' and added query and active properties for inline search state |
lib/components/SInputDropdown.vue |
Core implementation of inline search feature including filtering logic, keyboard navigation, chip rendering, and focus management |
lib/components/SDropdownSectionFilter.vue |
Updated to handle inline search mode by conditionally applying filters and highlighting active options |
lib/components/SDropdownSection.vue |
Pass through query and active props to filter section component |
stories/components/SInputDropdown.01_Playground.story.vue |
Added demo of inline search functionality in the playground story |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This comment was marked as resolved.
This comment was marked as resolved.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Initial plan * Add type="button" to inline chip close buttons Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com>
11 tasks
This comment was marked as resolved.
This comment was marked as resolved.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Initial plan * Add ARIA attributes for inline search combobox accessibility Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> * Remove package-lock.json and add to gitignore Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> * Add tests for ARIA accessibility attributes Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> * Revert .gitignore and apply linter fixes Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com>
This comment was marked as resolved.
This comment was marked as resolved.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Initial plan * Add aria-label to inline chip close buttons for accessibility Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> * Add internationalized aria-labels to inline chip close buttons Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com>
This comment was marked as resolved.
This comment was marked as resolved.
…666) * Initial plan * Refactor: eliminate chip rendering duplication by normalizing selected to array Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com>
This comment was marked as resolved.
This comment was marked as resolved.
This was referenced Dec 8, 2025
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
* Initial plan * Add Escape key handling to inline search functionality - Pressing Escape with text clears the search query - Pressing Escape with empty query closes the dropdown - Added comprehensive tests for Escape key behavior Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> * Remove unnecessary comments from Escape key handler Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com>
#668) * Initial plan * Add insertOnSpace prop to control Space key behavior in inline search Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> * Add JSDoc and refactor duplicate selection logic Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com>
…667) * Initial plan * Add comprehensive test coverage for inline search functionality Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> * Fix TypeScript type errors in test file Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> * Fix linting issues (trailing whitespace) Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com>
brc-dd
force-pushed
the
feat/inline-search-dropdown
branch
from
4d88d00 to
ca490bd
Compare
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.
codex generated code, I'll review and update it
closes #590