Combobox Inside Dialog Form

ProNew

A searchable select inside a modal dialog that scrolls with the wheel, closes with Escape one layer at a time, returns focus to its button and keeps the dialog's own focus trap working. Use this when a form in a dialog contains a long list.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

title

Guide and examples

When to use it

Use it for edit dialogs, create dialogs and settings sheets that contain a picker, where the list must scroll, receive focus and close without closing the dialog.

Do not use it when the picker is the only content of the dialog. Use a command dialog.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`options`	`{ value, label }[]`	-	The choices.
`onSubmit`	`({ name, value }) => void`	-	Runs when the form is saved.
`title`	`string`	`Edit member`	Dialog title.
`trigger`	`ReactNode`	a button	What opens the dialog.

Accessibility

The dialog is a Radix dialog with a title and description; the picker's popover is modal, so the page behind stays inert and the list scrolls with the wheel and with touch.
Escape closes the innermost open layer: the list, then the dialog.
Choosing returns focus to the picker button, which is inside the dialog's focus trap.
The picker has a visible label and is labelled by it.

Testing

The pattern ships with a Testing Library test (combobox-inside-dialog-form.test.tsx) that covers opening the dialog, choosing inside it, Escape closing one layer at a time and saving.