mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 04:15:04 +03:00
Gildas Garcia
c65935d0d3
## Problem The current [multi-select](https://supabase.com/design-system/docs/fragments/multi-select) does not work inside a dialog. The dropdown list is hidden. ## Solution Fix it using the `Popover` component which also handle repositioning above the input when there's not enough space below. ## How to test - [Demo on design-system](https://design-system-git-chore-fix-multi-select-supabase.vercel.app/design-system/docs/fragments/multi-select#inside-a-dialog) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Added a new example demonstrating multi-select usage within a dialog component with inline search capabilities. * Enhanced multi-select component with improved stability and interaction handling. * **Documentation** * Added "Inside a dialog" section to multi-select documentation with usage guidelines for inline search in dialog contexts. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
87 lines
2.2 KiB
Plaintext
87 lines
2.2 KiB
Plaintext
---
|
|
title: Multi Select
|
|
description: Multiple selection component.
|
|
component: true
|
|
fragment: true
|
|
---
|
|
|
|
<ComponentPreview name="multi-select-demo" description="" peekCode wide />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import {
|
|
MultiSelector,
|
|
MultiSelectorContent,
|
|
MultiSelectorItem,
|
|
MultiSelectorTrigger,
|
|
} from 'ui-patterns/multi-select'
|
|
```
|
|
|
|
```tsx
|
|
<MultiSelector
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
selected={selected}
|
|
onSelectedChange={onSelectedChange}
|
|
>
|
|
<MultiSelectorTrigger className="w-72" label="Fruits" />
|
|
<MultiSelectorContent sameWidthAsTrigger>
|
|
<MultiSelectorItem value="Apple">Apple</MultiSelectorItem>
|
|
<MultiSelectorItem value="Banana">Banana</MultiSelectorItem>
|
|
<MultiSelectorItem value="Grape">Grape</MultiSelectorItem>
|
|
<MultiSelectorItem value="Strawberry">Strawberry</MultiSelectorItem>
|
|
</MultiSelectorContent>
|
|
</MultiSelector>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Disabled
|
|
|
|
<ComponentPreview name="multi-select-disabled" />
|
|
|
|
### Badge Combo Box
|
|
|
|
Use `MultiSelectorInput`to add a search input.
|
|
|
|
<ComponentPreview name="multi-select-combobox" />
|
|
|
|
### Badge Combo Box with creatable selector
|
|
|
|
creatable: `boolean`
|
|
`creatable` prop on the `MultiSelectorList` component can be used to add a new option if no items match
|
|
|
|
<ComponentPreview name="multi-select-combobox-creatable" />
|
|
|
|
### Badge Limit
|
|
|
|
badgeLimit: `number` | `"wrap"`.
|
|
`badgeLimit` prop on the `MultiSelectorTrigger` component can be used to limit the number of badges displayed.
|
|
|
|
<ComponentPreview name="multi-select-badge-limit" />
|
|
|
|
### Badge Limit="wrap"
|
|
|
|
`badgeLimit` prop can also be "wrap" to wrap the badges to the next line.
|
|
|
|
<ComponentPreview name="multi-select-badge-limit-wrap" />
|
|
|
|
### Deletable Badge
|
|
|
|
Add the `deletableBadge` prop on the `MultiSelectorTrigger` component to enable badge removal directly from the badge.
|
|
|
|
<ComponentPreview name="multi-select-deletable-badge" />
|
|
|
|
### Inline search input
|
|
|
|
Use `mode="inline-combobox"` on the `MultiSelectorTrigger` component to add an inline search input.
|
|
|
|
<ComponentPreview name="multi-select-inline-search-input" />
|
|
|
|
### Inside a dialog
|
|
|
|
Use `mode="inline-combobox"` on the `MultiSelectorTrigger` component to add an inline search input.
|
|
|
|
<ComponentPreview name="multi-select-in-dialog" />
|