Input Autogrow

Поведение поля ввода в Tom Select может быть расширено через механизм автоматического изменения ширины инпута в зависимости от введённого текста. Плагин input_autogrow обеспечивает динамическое масштабирование текстового поля внутри компонента, устраняя фиксированную ширину и делая интерфейс более адаптивным при работе с тегами или поисковыми запросами переменной длины.

В стандартной реализации HTML input имеет фиксированную ширину, из-за чего длинные значения либо обрезаются визуально, либо требуют горизонтального скролла. В контексте Tom Select это особенно заметно в режиме множественного выбора, где поле ввода располагается рядом с уже выбранными тегами. Autogrow решает эту проблему за счёт вычисления ширины текста и подстройки input в реальном времени.

Подключение плагина

Плагин активируется через конфигурацию plugins при инициализации Tom Select. Он не требует дополнительных зависимостей и работает на основе внутреннего измерения ширины текста.

new TomSelect("#select-tags", {
  plugins: {
    input_autogrow: {}
  }
});

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

Принцип работы авторасширения

Механизм автогроу основан на синхронизации содержимого input с невидимым DOM-элементом. Каждый ввод символа вызывает пересчёт ширины:

  1. Текущий текст копируется в скрытый элемент.
  2. Измеряется его scrollWidth или вычисленная ширина через layout engine.
  3. Полученное значение применяется к input через style.width.

Таким образом, ширина поля всегда соответствует визуальной длине текста.

Поведение в режиме multi-select

В режиме множественного выбора input располагается после списка выбранных токенов. Без автогроу поле часто занимает фиксированное минимальное пространство, что создаёт ощущение «пустоты» или, наоборот, визуального обрыва ввода.

При включённом input_autogrow:

  • input расширяется по мере набора символов
  • при добавлении тега ширина сбрасывается до минимальной
  • после удаления последнего символа происходит повторное вычисление

Это обеспечивает визуальную целостность строки ввода и предотвращает переполнение контейнера.

Поведение в single-select

В одиночном выборе эффект менее выражен, однако полезен при поисковых полях, где ввод может быть длинным (например, фильтры, email, сложные запросы).

Особенности:

  • ширина растёт только в пределах контейнера
  • при потере фокуса ширина может возвращаться к базовому значению (если задано CSS-правило)
  • предотвращается горизонтальный скролл внутри input

Ограничения и контроль максимальной ширины

Автоматическое расширение требует ограничений, иначе input может выйти за пределы контейнера.

Типовые подходы ограничения:

.ts-control input {
  max-width: 100%;
}

или через конфигурацию контейнера:

  • ограничение ширины .ts-control
  • использование flex-wrap для переноса тегов
  • фиксация минимальной ширины input

Плагин не управляет max-width напрямую, он только вычисляет «естественную» ширину текста.

Взаимодействие с CSS и шрифтами

Точность автогроу зависит от совпадения вычислений с реальным рендерингом текста. На результат влияют:

  • font-family
  • font-size
  • font-weight
  • letter-spacing
  • padding input

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

Особенности работы с кастомными темами

В кастомных темах Tom Select часто изменяются базовые размеры элементов. В таких случаях автогроу может давать небольшие визуальные расхождения.

Типичные причины:

  • нестандартные line-height
  • увеличенные padding внутри input
  • применение transform-scale к контейнеру
  • использование monospace vs proportional fonts

Решение заключается в синхронизации CSS input и измерительного элемента, так как плагин предполагает одинаковую модель рендеринга для обоих.

Пересчёт ширины при программных изменениях

Изменения значения через API Tom Select:

const control = selectInstance;
control.setValue(["a", "b"]);

не всегда вызывают пользовательский input event. В таких случаях автогроу пересчитывается при следующем взаимодействии с полем.

Для принудительного обновления применяется вызов ререндера:

  • программная фокусировка
  • симуляция input события
  • внутренний refresh через refreshItems()

Работа в асинхронных сценариях

При загрузке опций с сервера и последующем автозаполнении input возможна кратковременная рассинхронизация ширины. Это связано с тем, что DOM ещё не завершил layout-вычисления.

Типичный сценарий:

  1. данные загружаются async
  2. значения устанавливаются программно
  3. автогроу пересчитывается после paint

В сложных интерфейсах это может проявляться как «прыжок» ширины.

Совместимость с другими плагинами Tom Select

input_autogrow корректно работает с большинством встроенных расширений:

  • remove_button — не влияет на вычисление ширины
  • clear_button — может вызывать краткий reset input
  • dropdown_input — расширяет поле внутри выпадающего меню
  • optgroup_columns — не влияет на input-логику

Конфликты возникают только при кастомных плагинах, которые изменяют DOM-структуру control-области.

Производительность и частота пересчётов

Пересчёт ширины выполняется на событиях ввода, что делает его чувствительным к частым обновлениям. В большинстве случаев нагрузка минимальна, однако при больших формах с множеством Tom Select инстансов возможны микрозадержки.

Оптимизационные моменты:

  • использование requestAnimationFrame для layout sync
  • минимизация CSS reflow внутри control
  • избегание тяжёлых теневых эффектов на input

Поведение при пустом значении

При отсутствии текста input возвращается к минимальной ширине, заданной стилями Tom Select. Это значение служит базовой точкой отсчёта и предотвращает схлопывание поля до нуля.

Минимальная ширина обычно определяется через:

  • placeholder длину
  • padding control контейнера
  • ширину курсора

Роль в UX-интерфейсах

Автогроу меняет восприятие ввода в сторону более «живого» интерфейса. Поле становится адаптивным к содержимому, снижая визуальный шум и улучшая читаемость длинных последовательностей тегов или значений.

В формах с высокой плотностью ввода это особенно заметно при работе с:

  • тегированием контента
  • фильтрацией данных
  • поисковыми интерфейсами с динамическими запросами
Оглавление