Skip to content

Commit 536dc86

Browse files
github-actions[bot]GitHub CopilotCopilot
authored
docs: document Select.Async modal and alignItemWithTrigger props (#228)
Add modal and alignItemWithTrigger props to the Select.Async Props table and include a limitation note about using Select.Async inside Dialog or Sheet containers. Co-authored-by: GitHub Copilot <copilot@github.com> Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 2a860d9 commit 536dc86

1 file changed

Lines changed: 8 additions & 4 deletions

File tree

docs/components/select.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -126,13 +126,17 @@ const fetcher: SelectAsyncFetcher<Fruit> = async ({ signal }) => {
126126

127127
Accepts all the same props as `Select` except `items`, plus:
128128

129-
| Prop | Type | Default | Description |
130-
| ------------- | ----------------------- | -------------- | ----------------------------------------------- |
131-
| `fetcher` | `SelectAsyncFetcher<T>` | - | Fetcher called each time the dropdown is opened |
132-
| `loadingText` | `string` | `"Loading..."` | Text shown while loading |
129+
| Prop | Type | Default | Description |
130+
| ---------------------- | ----------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
131+
| `fetcher` | `SelectAsyncFetcher<T>` | - | Fetcher called each time the dropdown is opened |
132+
| `loadingText` | `string` | `"Loading..."` | Text shown while loading |
133+
| `modal` | `boolean` | `false` | Whether the select traps focus (modal behavior). Set to `true` when rendering inside a `Dialog` or `Sheet` to preserve focus-trap. |
134+
| `alignItemWithTrigger` | `boolean` | `false` | Whether to align the selected item with the trigger when the dropdown opens. |
133135

134136
> **Note:** `Select.Async` does not support `ItemGroup<T>[]` — the fetcher must return a flat array.
135137
138+
> **Limitation:** `Select.Async` defaults to `modal={false}` and `alignItemWithTrigger={false}` to work around a Base UI scroll-lock bug with dynamically loaded items. As a result, it may not function correctly inside focus-trapping containers such as `Dialog` or `Sheet` — the focus trap can block interaction with the dropdown, or the portal may render outside the modal's visible area. If you need an async dropdown inside a `Dialog` or `Sheet`, prefer [`Combobox.Async`](./combobox.md) which uses Popover-based positioning and does not have this constraint.
139+
136140
### SelectAsyncFetcher
137141

138142
```ts

0 commit comments

Comments
 (0)