How to change zIndex in react-select drowpdown

reactjs react-select
Khushboo picture Khushboo · Apr 24, 2019 · Viewed 10.4k times · Source

I am using the react-select library to create autocomplete drop-down. I have used 2 drop-down parallel if 2nd has some data & I open first one then the zIndex problem comes. see the imageenter image description here

Answer

Vicente picture Vicente · Apr 24, 2019

Try this hacky way of setting zIndex, and let me know if it worked :)

<Select
  styles={{
    // Fixes the overlapping problem of the component
    menu: provided => ({ ...provided, zIndex: 9999 })
  }}
  value={selectedOption}
  onChange={evt => onSelectChange(evt, index)}
  options={options}
/>

Related questions

How to set a default value in react-select

I have an issue using react-select. I use redux form and I've made my react-select component compatible with redux form. Here is the code: const MySelect = props => ( <Select {...props} value={props.input.value} onChange={value => props.input.…

Read More
How to style react-select options

What's the best way to style a react-select component's (https://github.com/JedWatson/react-select) options? I can target the select itself just fine, with something like: ... import Select from 'react-select' ... const styles = { fontSize: 14, color: 'blue', } <Select options={[1,2,3,4]} placeholder={'Select …

Read More
How to programmatically clear/reset React-Select?

ReactSelect V2 and V3 seems to have several props like clearValue, resetValue and setValue. Whatever I'm trying, I'm not able to clear the selections programmatically. resetValue seems not to be accessible from the outside. selectRef.setValue([], 'clear') // or selectRef.clearValue() …

Read More