Quick Open File

ProNew

A search field over a file tree where Enter opens the first matching file, ArrowDown walks the results and the match is highlighted. Use this when people jump to a file by name, as in a code editor's Go to file.

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.

placeholder

Guide and examples

When to use it

Use it for editors, doc sites and storage browsers where people know the file name and want the keyboard to be enough.

Do not use it to browse an unfamiliar tree (use filterable-tree) or for fuzzy ranking across thousands of files (add a ranker and virtual-tree).

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
`nodes`	`TreeNode[]`	-	The file tree.
`onOpen`	`(file) => void`	-	A file was opened by Enter or double click.
`placeholder`	`string`	`"Go to file"`	Placeholder and accessible name of the field.

Accessibility

The field is a search input with an accessible name; the result count and the file Enter will open are in a polite live region.
Enter in the field and Enter on a focused row do the same job, so no pointer is needed.
Folders only open and close; they never count as the file to open.

Testing

The pattern ships with a Testing Library test (quick-open-file.test.tsx) that covers Enter from the field, the announcement, walking the results and the no-match case.

Guide and examples

When to use it

Use it for editors, doc sites and storage browsers where people know the file name and want the keyboard to be enough.

Do not use it to browse an unfamiliar tree (use filterable-tree) or for fuzzy ranking across thousands of files (add a ranker and virtual-tree).

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
`nodes`	`TreeNode[]`	-	The file tree.
`onOpen`	`(file) => void`	-	A file was opened by Enter or double click.
`placeholder`	`string`	`"Go to file"`	Placeholder and accessible name of the field.

Accessibility

The field is a search input with an accessible name; the result count and the file Enter will open are in a polite live region.
Enter in the field and Enter on a focused row do the same job, so no pointer is needed.
Folders only open and close; they never count as the file to open.

Testing

The pattern ships with a Testing Library test (quick-open-file.test.tsx) that covers Enter from the field, the announcement, walking the results and the no-match case.