Rich Tree View - Focus

Learn how to focus Tree View items.

Focus a specific node

You can use the the apiRef.focusNode method to focus a specific node. This methods receives two parameters: event and nodeId.

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 node</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 node</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.