Ant Design How to display "3 Selected" in Tree Select rather than display all value selected

Question

Basically in tree select when we select some options there will be shown the values chosen

Look at my code example

But when much data selected, the display will be larger and it's better for me to show the length of data selected than show all data selected

The expected result is 4 Selected, 2 Selected, 5 Selected.

Answer 1

Use maxTagCount and maxTagPlaceholder properties.

In this case, SELECTED_THRESHOLD is constant so it will render + X Selected after more than 2 selected items.

You should make your condition more generic like depending on input width etc.

function Demo() {
  const [selectedArray, setSelectedArray] = useState([]);

  return (
    <TreeSelect
      value={selectedArray}
      maxTagPlaceholder={`+ ${selectedArray.length - SELECTED_THRESHOLD} Selected`}
      maxTagCount={SELECTED_THRESHOLD}
      onChange={value => setSelectedArray(value)}
      ...
    >
      <TreeNode>
        ...
      </TreeNode>
    </TreeSelect>
  );
}

Check the demo.