Button dropdown not working properly in Reactstrap | React JS

Question

I'm working on a react project, using Button Dropdown component of Reactstap.

Dropdown working correctly but when it opens up, it overlaps the content in the website (in my case it is just a react-table in which I'm displaying some data.)

My problem is while overlapping the content, it partially allows us to interact with the table beneath it (As shown in the image it allows to resize column instead of selecting that item). It prevents that click behavior on the dropdown icon.

Kindly help me.

Here is my code

render() {

  return (
    <ContentWrapper>
      <div className="content-heading">
        Users
        <div className="header-actions">
          <i className="fas fa-search fa-xs header-action mt-2 neutral5-color" />
          <Input
            id="serach"
            name="name"
            type="search"
            placeholder="Search"
            value={this.state.search}
            onChange={event => this.setState({ search: event.target.value })}
            className="header-action"
          />
          <Button
            color="primary"
            onClick={this.toggleModal}
            className="header-action">
            Add User
          </Button>

          <ButtonDropdown color="primary" isOpen={this.state.dropdownOpen} toggle={() => {this.setState({dropdownOpen: !this.state.dropdownOpen})}}>
            <DropdownToggle caret>
              Filter (All)
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem onClick={() => console.log('all')}>All</DropdownItem>
              <DropdownItem onClick={() => console.log('user')}>User</DropdownItem>
              <DropdownItem onClick={() => console.log('super user')}>Super user</DropdownItem>
              <DropdownItem onClick={() => console.log('super admin')}>Super Admin</DropdownItem>
            </DropdownMenu>
          </ButtonDropdown>

          <AddUser
             toggleModal={this.toggleModal}
             fields={this.state}
          />
        </div>
      </div>
      <div className="section-content-wrapper flex-column">
        <Card className="card-default user-card-height">
          <CardBody>
            <ReactTable
              data={users}
              columns={this.columns}
              noDataText={"Didn't find any user."}
              defaultPageSize={DEFAULT_PAGE_SIZE_IN_TABLE}
              showPageSizeOptions={false}
              PaginationComponent={CustomPagination}
              minRows={0}
              sortable={false}
              loading={is_loading}
              onPageChange={page =>
                document.getElementsByClassName('rt-tbody')[0].scrollTop = 0
              }
            />
          </CardBody>
        </Card>
      </div>
    </ContentWrapper>
  );
}

Thanks in advance.

Answer 1

I dont know about Reactstap itself but the solution is that You need to make sure that the dropdown z-index is higher than the table and anything in the background that you want to be behind this dropdown menu.