Skip to content

fix(Dropdown): keep selected value inside input for searchable single select #3405

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rivka-ungar wants to merge 34 commits into
base: master
Choose a base branch
from
Open

fix(Dropdown): keep selected value inside input for searchable single select #3405

Show file tree
Hide file tree
Changes from 29 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
c3a4c33
fix(Dropdown): keep selected value inside input for searchable single…
rivka-ungar Jun 10, 2026
6edf9ba
docs(Dropdown): add dedicated Searchable single select storybook page
rivka-ungar Jun 10, 2026
3417b82
docs(Dropdown): add searchable single select accessibility reference
rivka-ungar Jun 10, 2026
11b7f86
docs(Dropdown): make a11y reference a Storybook page, trim to essentials
rivka-ungar Jun 10, 2026
127c22d
fix(Dropdown): remove leftover selected-value overlay for searchable …
rivka-ungar Jun 11, 2026
d0ea70b
docs(Dropdown): document selected-value behavior change and add trade…
rivka-ungar Jun 11, 2026
8b0f582
fix(docs): escape MDX expression in searchable single select page
rivka-ungar Jun 11, 2026
ec82022
feat(Dropdown): add textInput and interactiveChips multi-select modes
rivka-ungar Jun 11, 2026
2e64c64
docs(Dropdown): add multi-select accessibility modes page
rivka-ungar Jun 11, 2026
4fcb1dc
docs(Dropdown): simplify multi-select a11y page to 2 proposed solutions
rivka-ungar Jun 11, 2026
1769c1d
[prerelease]
rivka-ungar Jun 11, 2026
82168c5
fix(Dropdown): use selectedItems diff to find removed item in useMult…
rivka-ungar Jun 11, 2026
2620010
[prerelease]
rivka-ungar Jun 11, 2026
f279286
docs(Dropdown): increase multi-select a11y story width to 600px
rivka-ungar Jun 11, 2026
18df1ce
docs(Dropdown): clarify multi-select a11y problem and add chip overfl…
rivka-ungar Jun 15, 2026
30a6147
docs(Dropdown): widen overflow chip example to 350px; fix MultiSelect…
rivka-ungar Jun 15, 2026
dbe9c5e
refactor(Dropdown): remove textInput multi-select mode
rivka-ungar Jun 24, 2026
b586b6a
fix(Dropdown): accessibility improvements for searchable dropdown
rivka-ungar Jun 24, 2026
f8eda67
docs(Dropdown): add 2026-06-24 iteration section to searchable single…
rivka-ungar Jun 24, 2026
26bd70c
docs(Dropdown): move 2026-06-24 section above the original What changed
rivka-ungar Jun 24, 2026
3624cf6
feat(Dropdown): expose selection summary as combobox value in interac…
rivka-ungar Jun 25, 2026
f211010
docs(Dropdown): add 2026-06-25 What changed section to multi-select a…
rivka-ungar Jun 25, 2026
33aa013
docs(Dropdown): move 2026-06-25 section under the interactiveChips co…
rivka-ungar Jun 25, 2026
3f226c9
fix(Dropdown): expose selected chips as a labelled group
rivka-ungar Jun 25, 2026
1543770
fix(Dropdown): render each selected chip as a single remove button
rivka-ungar Jun 25, 2026
2a405f8
docs(Dropdown): add chips group + remove-button fixes to 2026-06-25 s…
rivka-ungar Jun 25, 2026
25d217d
fix(Dropdown): correct aria-selected on options in multi-select
rivka-ungar Jun 25, 2026
a47d3e0
fix(Dropdown): give the chevron an accessible name from the label/input
rivka-ungar Jun 30, 2026
8b7517d
fix(Dropdown): announce multi-select chips via aria-describedby, drop…
rivka-ungar Jun 30, 2026
ae04db8
fix(Dropdown): expose selected chips wrapper as a labelled group
rivka-ungar Jun 30, 2026
fab50a2
fix(Dropdown): focus management for the +N overflow chips dialog
rivka-ungar Jun 30, 2026
b78733a
fix(Dropdown): give the chevron a real accessible name (single + multi)
rivka-ungar Jun 30, 2026
c1ce229
fix(Dropdown): Space selects the highlighted option in searchable mode
rivka-ungar Jun 30, 2026
c7b27a7
docs(Dropdown): consolidate today's a11y changes under one dated heading
rivka-ungar Jun 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/components/layout/src/Flex/Flex.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@ export interface FlexProps extends VibeComponentProps {
* ID of the element describing the flex container.
*/
"aria-labelledby"?: string;
/**
* The ARIA role of the flex container.
*/
role?: React.AriaRole;
Comment on lines +66 to +69

@qodo-free-for-open-source-projects qodo-free-for-open-source-projects Bot Jun 25, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Action required

1. flexprops not in .types.ts 📘 Rule violation ⚙ Maintainability

FlexProps is still declared in Flex.tsx even though a Flex.types.ts file exists, and this PR
adds another prop (role) there. This breaks the required typing convention and makes the component
harder to maintain consistently.
Agent Prompt 
## Issue description
`FlexProps` is declared in `Flex.tsx` instead of the dedicated `Flex.types.ts` file, and this PR extends that in-file interface by adding `role`.

## Issue Context
The compliance rule requires component prop types to live in `*.types.ts` (and extend `VibeComponentProps`) to keep a predictable, maintainable structure.

## Fix Focus Areas
- packages/components/layout/src/Flex/Flex.tsx[9-70]
- packages/components/layout/src/Flex/Flex.types.ts[1-20]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Comment on lines +66 to +69

@qodo-free-for-open-source-projects qodo-free-for-open-source-projects Bot Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Action required

1. flexprops defined in flex.tsx 📘 Rule violation ⚙ Maintainability

The role prop was added to FlexProps inside Flex.tsx even though the component has a dedicated
Flex.types.ts file. This violates the requirement that component prop interfaces live in
*.types.ts, reducing consistency and maintainability.
Agent Prompt 
## Issue description
`FlexProps` (including the newly added `role` prop) is declared in `Flex.tsx` instead of in `Flex.types.ts`, which breaks the standard typing convention for components.

## Issue Context
The Flex component already has `Flex.types.ts`, but it currently contains only type aliases. The props interface should be moved there and exported, and `Flex.tsx` should import it.

## Fix Focus Areas
- packages/components/layout/src/Flex/Flex.tsx[9-70]
- packages/components/layout/src/Flex/Flex.types.ts[1-20]
- packages/components/layout/src/Flex/index.ts[1-1]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

}

const Flex = forwardRef(
Expand All @@ -83,6 +87,7 @@ const Flex = forwardRef(
style,
"aria-labelledby": ariaLabelledby,
"aria-label": ariaLabel,
role,
tabIndex,
"data-testid": dataTestId
}: FlexProps,
Expand Down Expand Up @@ -153,6 +158,7 @@ const Flex = forwardRef(
onMouseDown={onMouseDown}
style={overrideStyle}
aria-label={ariaLabel}
role={role}
>
Comment thread
qodo-free-for-open-source-projects[bot] marked this conversation as resolved.
Comment on lines 158 to 162

@qodo-free-for-open-source-projects qodo-free-for-open-source-projects Bot Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Action required

2. flex root missing data-vibe 📘 Rule violation ◔ Observability

The Flex root element still does not include a [data-vibe] attribute, even as new props (role)
are being added to the root. This blocks consistent component identification/instrumentation
expected by the compliance rule.
Agent Prompt 
## Issue description
Flex is required to render a root DOM element with a `[data-vibe]` attribute, but the root element props do not include it.

## Issue Context
The PR updates the root element props by adding `role={role}`; this is the right place to also add `data-vibe` to satisfy the required instrumentation/identification pattern.

## Fix Focus Areas
- packages/components/layout/src/Flex/Flex.tsx[140-162]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

{children}
</Element>
Expand Down
6 changes: 6 additions & 0 deletions packages/core/src/components/Dropdown/Dropdown.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ interface MultiSelectSpecifics<Item extends BaseItemData<Record<string, unknown>
* Callback fired when an option is removed in multi-select mode. Only available when multi is true.
*/
onOptionRemove?: (option: Item) => void;
/**
* If true, chips are always visible and support keyboard navigation: pressing Backspace or Left arrow
* from the input moves focus to the last chip; Left/Right navigates between chips; Delete/Backspace
* removes the focused chip. Only applies when searchable=true.
*/
interactiveChips?: boolean;
/**
* The function to call to render the selected value on single select mode.
*/
Expand Down
Loading
Loading