How to change zIndex in react-select drowpdown
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}/>
After seeing the half dozen related issues, yet not finding a resolution, I have finally found one.
<Select menuPortalTarget={document.body} menuPosition={'fixed'} />Add these two options to your Select component.
It appears to make us of the new React Portal feature.
EDIT: If you do the above, you then run into this problem with the menu anchoring to the page due to position: fixed. Removing it may help. https://github.com/JedWatson/react-select/issues/4088