Как предотвратить усечение выбранных длинных строковых значений в элементе управленияact-select? - PullRequest
Новая
       36

Как предотвратить усечение выбранных длинных строковых значений в элементе управленияact-select?

1 голос
/ 03 июля 2019

Я использую react-select Creatable компонент.Всякий раз, когда я выбираю длинное значение, оно усекается, и в конце выбранного значения добавляются 3 точки.Есть ли способ отключить это усечение?Я хотел бы видеть все выбранные значения.

enter image description here

Если это поможет, вот мой код 

 <ReactCreatableSelect
            disabled={isDisabled}
            filterOption={createFilter({ ignoreAccents: false })}
            options={options}
            onChange={this.onNewSelectChange}
            onCreateOption={this.onCreateOption}
            components={{ MenuList }}
            isMulti={this.isMulitpleChoice()}
            value={((!Array.isArray(value) ? [value] : value) as Array<any>).map(x => ({ label: x, value: x }))}
            isClearable={true}
            isSearchable={true}
            isLoading={loading}

          />

Ответы [ 2 ]

1 голос
/ 03 июля 2019

Благодаря Dairylee , я нашел правильное решение для этого 

const ReactSelectStyles = () => ({
  multiValueLabel: (styles: any) => ({
    ...styles,
    whiteSpace: "normal",
  }),
})
1 голос
/ 03 июля 2019

Вам необходимо переопределить стили для MultiValueLabel и удалить текущие стили overflow: hidden и text-overflow: ellipsis, которые применяются по умолчанию. 

const ReactSelectStyles = () => ({
  multiValueLabel: styles => ({
    ...styles,
    overflow: auto,
    text-overflow: ""
  }),
})

<ReactCreatableSelect 
  ...
  styles={ReactSelectStyles()}
/>

Я бырекомендую не делать этого, поскольку это сделано по какой-то причине.В настоящее время текст обрезается только тогда, когда он слишком велик, чтобы поместиться в поле Select.

...