Path Search With Recents

ProNew

A flat search over every full path of a hierarchy, matching any segment, with recent choices on top and the path shown as a trail. Use this when people know the name of the leaf but not where it lives.

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.

maxRecent4

Guide and examples

When to use it

Use it for large taxonomies, org charts and file locations, where typing "berlin" is faster than opening three levels, and the last few places are picked again and again.

Do not use it when people need to browse to discover what exists. Use a cascader or a drill-down.

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
`tree`	`{ id, label, children? }[]`	-	The hierarchy; every leaf becomes a result.
`value`	`string[]`	-	The chosen path of ids (controlled).
`defaultValue`	`string[]`	`[]`	Initial path.
`onValueChange`	`(path: string[]) => void`	-	Runs when a path is picked.
`recent`	`string[][]`	-	Recent paths, newest first (controlled).
`onRecentChange`	`(paths: string[][]) => void`	-	Runs with the new list after a pick.
`maxRecent`	`number`	`4`	How many recent paths to keep.

Accessibility

Each option's accessible name is the full path in words (Europe, Germany, Berlin), so the segment that matched is never hidden.
The group labels are Recent and All places; Recent is removed while a search is typed.
flattenPaths is exported and returns the leaf paths of any tree.
Picking returns focus to the button.

Testing

The pattern ships with a Testing Library test (path-search-with-recents.test.tsx) that covers flattening, searching by any segment, recents moving to the front and hiding while searching.