React-select v3 const style = { control: base => ({ …base, border: 0, // This line disable the blue border boxShadow: ‘none’ }) }; Here a live example React-select v2 To reset border when Select is focused you have two solutions: Use the state control: (base, state) => ({ …base, border: state.isFocused ? 0 : … Read more
Add these lines in your all Select tag: <Select // other props menuPortalTarget={document.body} styles={{ menuPortal: base => ({ …base, zIndex: 9999 }) }} />
In my project, I’m using react-testing-library and jest-dom. I ran into same problem – after some investigation I found solution, based on thread: https://github.com/airbnb/enzyme/issues/400 Notice that the top-level function for render has to be async, as well as individual steps. There is no need to use focus event in this case, and it will allow … Read more
try to add prop instanceId set as unique string and should work
In chrome, got to Elements > Event Listeners > open “blur” > with the mouse go to the right of where it is written “document”, then you can see a button “Remove” > click on it
I came across this problem myself and managed to fix it by passing a key to the React-Select component, with the selected value appended to it. This will then force the ReactSelect to re-render itself when the selection is updated. I hope this helps someone. import ReactSelect from ‘react-select’; … <ReactSelect key={`my_unique_select_key__${selected}`} value={selected || ”} … Read more
I guess you need something like this: const MySelect = props => ( <Select {…props} value = { props.options.filter(option => option.label === ‘Some label’) } onChange = {value => props.input.onChange(value)} onBlur={() => props.input.onBlur(props.input.value)} options={props.options} placeholder={props.placeholder} /> ); #EDIT 1 : In the new version const MySelect = props => ( <Select {…props} options={props.options} onChange = … Read more