Why is Ant Design TreeSelect clipping values?

Question

I am currently using Ant Design tree select component to filter out sites. I've used mock data for now but my data structure is the same. When I select a parent the children should be expanded, it seems to be working fine when selecting both parents, but when selecting only one parent, the second doesnt seem to expand with its children and simply clips the values from being seen.

export const SiteFilter = () => {


  const treeData = [
    {
      value: 'parent 1',
      title: 'parent 1',
      children: [
        {
          value: 'parent 1-0',
          title: 'parent 1-0',
          children: [
            {
              value: 'leaf1',
              title: 'leaf1',
            },
            {
              value: 'leaf2',
              title: 'leaf2',
            },
            {
              value: 'leaf3',
              title: 'leaf3',
            },
            {
              value: 'leaf4',
              title: 'leaf4',
            },
            {
              value: 'leaf5',
              title: 'leaf5',
            },
            {
              value: 'leaf6',
              title: 'leaf6',
            },
          ],
        },
        {
          value: 'parent 1-1',
          title: 'parent 1-1',
          children: [
            {
              value: 'leaf11',
              title: <b style={{ color: '#08c' }}>leaf11</b>,
            },
          ],
        },
      ],
    },
  ]

  return (
    <Space direction="vertical">
      <Text>
        Sites (Select Limit: {siteLimit}){' '}
        {isError ? (
          <>
            - <Text type="danger">Failed to fetch sites</Text>
          </>
        ) : null}
      </Text>

      <TreeSelect
        treeData={treeData}
        dropdownStyle={
          {
            // maxHeight: '300px', // maxHeight doesnt work and minHeight extends the 
            // height of the container but the values are still clipped. 
            // overflowY: 'auto', // Enforce scrolling
          }
        }
        className={css`
          width: 350px;
          overflow: auto; //Initially set to 'scroll' which fails
        `}
        placeholder="Type or select a site..."
        value={query.sites as string[]}
        onChange={handleOnChange}
        allowClear
        showSearch
        multiple
        loading={isLoading}
        data-testid="sites-filter"
        treeCheckable
        showCheckedStrategy="SHOW_PARENT"
        treeDefaultExpandedKeys={defaultExpandedKeys}
        treeNodeFilterProp="title"
        status={isError ? 'error' : undefined}
      />

      <Text type="secondary">Which stores should be included?</Text>
    </Space>
  )
}

As you can see from the screenshot below, the value 'parent 1-1' and its children are clipped.

[![Bug screenshot][1]][1] [1]: https://i.sstatic.net/gwYMRDqI.png

please see a video demonstration

https://drive.google.com/file/d/17lGQPvuCNFp_YpS93l2WwJMcJ95ZeOPO/view?usp=sharing

So whats happening here? Why is the values being clipped from the view? I doesn't appear to be related to height as I've already played around with the height, maxHeight, minHeight and also overflow

Thanks in advance

Answer 1

This is a bug that was caused by rc-virtual-list, an Ant D dependancy that has been fixed. It was a problem with the height not being set and the marginBottom clipping the dropdown.

Please see the MR below and update your ant D with npm update antd https://github.com/react-component/virtual-list/pull/291 for more info.