StickyHeader Row is hindering the drop down list view

Mueez Khan 0
Viewed 27

I have made my row header, of material UI Table component, sticky using the stickyHeader attribute

 <Table stickyHeader className={classes.table}></Table>

there are two drop-downs displayed above this table, these are implemented using the ReactSelect component

const DropDown = props => (
    <div className={[props.divClasses, props.error ? 'error-class' : ''].join(' ')}>
        <ReactSelect
            {...props}
            classNamePrefix="normal-select"
            disabled={props.disabled ? props.disabled : false}
            multi={props.multi}
            placeholder={props.placeholder ? props.placeholder : 'Select'}
            closeOnSelect={props.closeOnSelect}
            clearable={props.clearable}
            searchable={props.searchable}
            options={props.options ? props.options : []}
            value={props.simpleValue ? props.options.filter(
                ({ value }) => value === props.value) : props.value}
            isLoading={props.isLoading}
            className={` ${props.className ? props.className : ''}`}
            onChange={option => props.onChange(props.property, props.simpleValue ? option?.value : option)}
            onBlur={props.onBlur}/>
        {props.error && <FormHelperText style={{ color: '#f44336' }}>{props.error}</FormHelperText>}
    </div>
);

because of being sticky, the header of the table component is now corrupting the view of the drop downs

currently, I am getting, enter image description here

the expected behavior is, enter image description here

kindly help me in this regard.

sticky react-select material-ui reactjs css
1 Answers

The reason of this overlapping is because mui table's sticky header's default z-index value is 2 and is greater than react-select menu's default z-index value 1.

So, you need to increase z-index of react-select component's menu property to some value that is greater than 2 like this:

const customStyles = {
    menu: (provided, state) => ({
      ...provided,
      zIndex: 3
    })
};


<ReactSelect
  value={selectedOption}
  onChange={setSelectedOption}
  options={options}
  styles={customStyles}
/>

You can take a look at this sandbox for a live working example of this usage.

Ahmet Emre Kılınç0
Related