Я пытаюсь заставить компонент React-Select работать на маленьких экранах. Для этого я бы хотел, чтобы компонент не расширялся по вертикали. Если в компоненте достаточно места, я хотел бы видеть следующее, если выбраны две опции:
Option1 (2) //Option1 and Option2 selected
Если места недостаточно, желательно следующее:
Opt... (2) //Option1 and Option2 selected
Или хотя бы
Opt... //Option1 and Option2 selected, counter not visible anymmore
Для этого я объединил два примера: https://codesandbox.io/s/v638kx67w7 https://codesandbox.io/s/xv2ql44xxp
Однако в нем есть странная ошибка что я не смог исправить. Если вы выбираете первое имя, затем нажимаете за пределами компонента, затем добавляете второе имя, нажимаете за пределами компонента, затем нажимаете, чтобы добавить другой параметр, бывает, что содержимое компонента каким-то образом смещается влево и первый символ (и) ) исчезнуть
Вот мой код: https://codesandbox.io/s/react-codesandboxer-example-9v3fr (не забудьте уменьшить ширину столбца, содержащего компонент, чтобы он был уже первой записи)
Это Вот как выглядит обрезанное содержимое компонента:
Я пытался изменить несколько CSS свойств в инструментах разработчика браузера, но не смог найти из того, что вызывает поведение. Любые намеки или даже решение?