how to show select on top of the grid when used in floating filters

Question

i am trying to make a custom floating filter, which is a select from multiple values. my issue is that when using a custom select component (react-select) the container containing the choices would come under the table and will look clipped.

i tried using a standard select (from react-strap) and it worked well, by popping out out of the grid, but that doesn't have all the features I need so I can't use it.

here is the filter component code I am using right now :

return <DropDown
      isOpen={this.state.open}
      onClose={()=>{this.setState({open:!this.state.open})}}
      target={
        <Button
          iconAfter={<ChevronDown />}
          onClick={()=>{this.setState({open:!this.state.open})}}
          isSelected={this.state.open}
        >
          xyz
        </Button>
      }
    >
      <Select
        className="ag-custom-component-popup"
        autoFocus
        backspaceRemovesValue={false}
        components={{ DropdownIndicator:this.DropdownIndicator, IndicatorSeparator: null }}
        controlShouldRenderValue={false}
        hideSelectedOptions={false}
        isClearable={false}
        onChange={(event)=>{
          console.log(event);
        }}
        options={[........]}
        placeholder="Search..."
        styles={this.selectStyles}
        tabSelectsValue={false}
        value={null}
      />
    </DropDown>

i tried adding the ag-custom-componenet-popup as instructed by the docs but that didn't help at all, here is how it looks now. (the xyz button is the trigger for the select)

question from:https://stackoverflow.com/questions/65876631/how-to-show-select-on-top-of-the-grid-when-used-in-floating-filters

Answer 1

Waitting for answers