react-select

Testing React Select component

by

This is a recurrent question. I’m sharing my own code with 100% passing tests which cover 100% of my source code. My component looks like this MySelectComponent({ options, onChange }) { return <div data-testid=”my-select-component”> <Select className=”basic-single” classNamePrefix=”select” name=”myOptions” placeholder=”Select an option” options={options} onChange={e => onChange(e)} /> </div>; } The reason I’m adding a wrapper on … Read more

Changing height of react-select component

by

Spending hours, I end up with this to get exact 30px height of react select with border 1px: const customStyles = { control: (provided, state) => ({ …provided, background: ‘#fff’, borderColor: ‘#9e9e9e’, minHeight: ’30px’, height: ’30px’, boxShadow: state.isFocused ? null : null, }), valueContainer: (provided, state) => ({ …provided, height: ’30px’, padding: ‘0 6px’ }), … Read more

react-select: Is there a way to remove the button on the right that expand the list, at least in async mode?

by

We can remove the dropdown indicator by including DropdownIndicator: () => null in components property. Update:As @shlgug and @nickornotto suggested remove separator by including IndicatorSeparator:() => null <Select components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }} />

How to style react-select options

by

react select v2 (update) This new version introduces a new styles-api and some other major changes. Custom Styles Style individual components with custom css using the styles prop. const colourStyles = { control: styles => ({ …styles, backgroundColor: ‘white’ }), option: (styles, { data, isDisabled, isFocused, isSelected }) => { const color = chroma(data.color); return … Read more

React-Select Remove focus border

by

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

how to test react-select with react-testing-library

by

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