Rich Tree View - Focus

Learn how to focus Tree View items.

Focus a specific item

You can use the the apiRef.focusItem method to focus a specific item. This methods receives two parameters: event and itemId.

To use the apiRef object, you need to initialize it using the useTreeViewApiRef hook as follows:

const apiRef = useTreeViewApiRef();

return <RichTreeView apiRef={apiRef} items={ITEMS}>;

apiRef will be undefined during the first render and will then contain methods allowing you to imperatively interact with the Tree View.

Data Grid
Date and Time Pickers
Charts
Tree View

<Box sx={{ mb: 1 }}>
  <Button onClick={handleButtonClick}>Focus pickers item</Button>
</Box>
<Box sx={{ height: 264, flexGrow: 1 }}>
  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
</Box>

<Box sx={{ mb: 1 }}>
  <Button onClick={handleButtonClick}>Focus pickers item</Button>
</Box>
<Box sx={{ height: 264, flexGrow: 1 }}>
  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
</Box>

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.