I am using react-select ^5.1.0 and my options and values are displayed well. I have a small issue when scrolling the options, a select word overlapps the options. I have attached an image that can explain better. What can i do to remove the select
word on my options? It blocks them.
My code :
const methods = useForm();
<label> Line Manager : </label>
<Controller
control={methods.control}
className="basic-single"
classNamePrefix="select"
styles={{ marginTop : '10px', marginBottom : '10px'}}
name="line_manager"
render={({ value, ref }) => (
<Select
inputRef={ref}
options={items}
className="basic-multi-select"
value={items.find(c => c.fullnames === value)}
onChange={val => setLineManager(val.id)}
getOptionLabel={items => items.fullnames}
getOptionValue={items => items.id}
/>
)}
/>
Looks like the label on those select boxes have a higher z-index than that of the options box. Ideally, you need to increase the z-index of the options overlay.