react-tree-multi-select docs

Controlled

react-tree-multi-select allows you to externally control the dropdown’s open and close state using the openDropdown prop. This gives you full control over when the dropdown is rendered or hidden. By pairing 'openDropdown' with the 'onDropdownToggle' callback, you can synchronize the dropdown’s visibility state with your application’s state, enabling custom behaviors such as toggling from external controls or reacting to other UI events. Here’s how to implement controlled dropdown behavior:

import React, {FC, memo, useState} from 'react';
import {TreeMultiSelect, TreeNode} from 'react-tree-multi-select';
import {getTreeNodeData} from '@/utils/utils';
import {OptionTreeNode} from '@/utils/data';

export const ControlledExample: FC = memo(() => {

  const [data, setData] = useState<OptionTreeNode[]>(getTreeNodeData(true, true, true));
  const [open, setOpen] = useState<boolean>(true);

  const handleDropdownToggle = (open: boolean): void => {
    setOpen(open);
  };

  const handleNodeChange = (_node: TreeNode, _selectedNodes: TreeNode[], data: TreeNode[]): void => {
    setData(data as OptionTreeNode[]);
  };

  const handleNodeToggle = (_node: TreeNode, _expandedNodes: TreeNode[], data: TreeNode[]): void => {
    setData(data as OptionTreeNode[]);
  };

  return (
    <div className="controlled-example">
      <TreeMultiSelect
        data={data}
        withClearAll={false}
        openDropdown={open}
        onDropdownToggle={handleDropdownToggle}
        onNodeChange={handleNodeChange}
        onNodeToggle={handleNodeToggle}
      />
    </div>
  );
});

REACT TREE MULTI SELECT

REACT TREE MULTI SELECT

Controlled