Как сделать выделенное значение в одиночном выделении расти похожим на множественное выделение

Question

В реагирующем выборе, если я использую множественный выбор, все выбранные значения отображаются в виде таблеток, и все поле ввода увеличивается, чтобы показать все выбранные значения. Но в случае однократного выбора он просто остается фиксированным, а любой переполненный текст обрезается многоточием. Существуют сценарии, в которых отдельный выбор будет иметь ограниченную ширину в пользовательском интерфейсе, но я могу настроить область по высоте, чтобы пользователь мог видеть весь выбранный параметр. Это возможно с изменениями CSS? Или есть какой-то конфиг для этого?

Answer 1

Я бы предложил создать свой собственный элемент Select с пользовательским styles реквизитом, подобным этому:

const styles = {
  singleValue: base => ({
    ...base,
    // You will to add a bit more space around your option so it can fit
    maxWidth: "calc(100% - 10px)",
    position: "relative",
    textOverflow: "initial",
    top: "initial",
    transform: "none",
    whiteSpace: "initial"
  })
};

<Select options={options} styles={styles} />

Одним из важных моментов является сброс положения элемента absolute элемента.

Здесь живой пример .