Menu
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 image
370
Set the first option element of the select tag to disabled and give it an empty string value. Initialize the state for the select tag to an empty string.
To handle the onChange event on a select element in React: Set the onChange prop on the select element. Keep the value of the selected option in a state variable. Every time the user changes the selected option, update the state variable.
To set the background color for react-select drop downs, we can return an object with the color values set. We set the styles prop to the customStyles object which has various styles. The control method in the object returns an object with the style values.
Add these lines in your all Select tag:
<Select // other props menuPortalTarget={document.body} styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }} /> 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} /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
