TreeSelect is hidden behind when using it in a Modal and trying to open it to see it's elements

Question

I tried using the Ant Design TreeSelect component withing a Modal, but when opening that TreeSelect the values of the tree is hidden behind the Modal.

I tried using a higher value of z-index but it didn't help! Any ideas?

import React from "react";
import ReactDOM from "react-dom";
import { version } from "antd";
import { TreeSelect } from "antd";

import {
  Button,
  ComposedModal,
  ModalBody,
  ModalFooter,
  ModalHeader
} from "carbon-components-react";

import "antd/dist/antd.css";
import "./index.css";

const treeData = [
  {
    title: "Node1",
    value: "0-0",
    key: "0-0",
    children: [
      {
        title: "Child Node1",
        value: "0-0-1",
        key: "0-0-1"
      },
      {
        title: "Child Node2",
        value: "0-0-2",
        key: "0-0-2"
      }
    ]
  },
  {
    title: "Node2",
    value: "0-1",
    key: "0-1"
  }
];

function treeSelectChange(e, value) {
  console.log(e);
  //e.preventDefault()
}

ReactDOM.render(
  <div className="App">
    <h1>antd version: {version}</h1>
    {/* <p>
      Please <b>fork</b> this sandbox to reproduce your issue.
    </p> */}

    <ComposedModal
      open={true}
      // onClose={(e) => this.closeRuleEditorModal(e) }
      className=""
    >
      <ModalHeader title="Rule Editor" className="HeaderToolbar White" />
      <ModalBody>
        <TreeSelect
          // className="on-front"
          style={{
            width: "100%"
          }}
          // value={element.Value}
          dropdownStyle={{
            maxHeight: 400,
            overflow: "auto",
            zIndex: 10000
            // position: "absolute"
          }}
          treeData={treeData}
          // placeholder={element.Name}
          treeDefaultExpandAll
          onChange={treeSelectChange}
        />
      </ModalBody>
      <ModalFooter>
        <Button
          kind="secondary"
          size="small"
          // onClick={(e) => this.closeRuleEditorModal(e) }
        >
          Cancel
        </Button>
        <Button
          kind="primary"
          id="btnSave"
          size="small"
          // onClick={() => this.fabricateCustomizedProject()}
        >
          Save
        </Button>
      </ModalFooter>
    </ComposedModal>
  </div>,
  document.getElementById("root")
);

To reproduce issue, you may also use https://codesandbox.io/s/antd-reproduction-template-ci559

Update

It worked for me when I used a z-index with value 10000 (have no idea why I had to set so high value, seems one of the css that I used for other components -Modal- is using a big z-index inside).

Answer 1

dropdownStyle={{ maxHeight: 400, overflow: 'auto',zIndex:"100000" }}

It works for me