ReactSelect Поле ввода ввода не рассчитывается правильно

Question

Когда я набираю текст в поле, текст перемещается влево, обрезая левую часть. Если я выхожу из коробки и возвращаюсь к ней, правая часть тоже обрезается.

Код и поле этого кода здесь

Раньше он работал нормально, и я сравнил старую версию рядом с текущей. Если я наберу одинаковые слова в каждом, style.width каждого из них отличается. Например, если я введу «abcdefg» в обоих приложениях, style.width старой версии будет 74px, а style.width в новой версии - только 62px. Код, который вычисляет эту ширину, равен здесь в реагирующем вводе-autosize, а значение this.sizer.scrollWidth отличается между хорошей версией и плохой версией моего приложения. Я просто не могу сказать, что заставляет его быть другим.

Answer 1

Причина в том, что ширина рассчитывается на основе скрытого div. Div скрытого заполнен тем же текстом, что и значение, которое вы вводите в текстовое поле.

Значение переполнения устанавливается на scroll, а затем рассчитывается ширина для того же.

Теперь эта ширина зависит от font-size. font-size для текста, вероятно, был изменен вами для текстового поля поиска, но font-size для sizer все тот же, и поэтому проблема. Когда я корректирую размер вручную, он отлично работает

Я не копался в CSS, чтобы проверить, где вы внесли изменения, но этого должно быть достаточно для исправления проблемы