React-Select, Multi Select and Text Overflow

reactjs react-select
Knows Not Much picture Knows Not Much · Feb 2, 2016 · Viewed 16.8k times · Source

I am using React-Select component with multi select. One of the problems I am facing is that if the user select 3 or 4 options the UI looks pretty bad because the text begins to overflow and that causes the component to grow either horizontally and vertically.

I want to have a behavior where the size of the component remains the same and if the user selects more options then it just shows "..." (ellipsis) rather than try to show the newly selected options.

The behavior I want is more inline with this component

http://instructure-react.github.io/react-select-box/

See how it handles multi-select.

I don't want to swap out components now because we have done lots of testing with React-Select.

Can you give me some guide lines on how to achieve this without removing react-select.

Answer

shahar taite picture shahar taite · Jan 2, 2019

i've managed to achieve both the ellipsis effect and leaving the display at one row, here is a working example https://codesandbox.io/s/v638kx67w7 hope this helps

Related questions

How to set a default value in react-select

I have an issue using react-select. I use redux form and I've made my react-select component compatible with redux form. Here is the code: const MySelect = props => ( <Select {...props} value={props.input.value} onChange={value => props.input.…

Read More
How to style react-select options

What's the best way to style a react-select component's (https://github.com/JedWatson/react-select) options? I can target the select itself just fine, with something like: ... import Select from 'react-select' ... const styles = { fontSize: 14, color: 'blue', } <Select options={[1,2,3,4]} placeholder={'Select …

Read More
How to programmatically clear/reset React-Select?

ReactSelect V2 and V3 seems to have several props like clearValue, resetValue and setValue. Whatever I'm trying, I'm not able to clear the selections programmatically. resetValue seems not to be accessible from the outside. selectRef.setValue([], 'clear') // or selectRef.clearValue() …

Read More