Программное управление фокусом

Фокус в интерфейсах на базе Tom Select играет ключевую роль в управлении вводом, открытием выпадающего списка и навигацией с клавиатуры. Библиотека предоставляет прямые методы для установки и снятия фокуса, а также позволяет контролировать состояние поля ввода и раскрытого списка без взаимодействия пользователя.

Основные механизмы фокусировки

Экземпляр Tom Select предоставляет методы для управления фокусом напрямую:

  • focus() — устанавливает фокус на поле ввода
  • blur() — снимает фокус с компонента

Фокус в контексте Tom Select всегда относится к внутреннему input-элементу, который управляет поиском и вводом значений.

const select = new TomSelect("#select");

select.focus();

После вызова focus() курсор устанавливается в текстовое поле компонента, а при включённой опции открытия по фокусу может автоматически раскрыться список.

const select = new TomSelect("#select", {
  openOnFocus: true
});

Снятие фокуса и потеря активности

Метод blur() переводит компонент в неактивное состояние, закрывает список и завершает ввод.

select.blur();

При вызове:

  • закрывается dropdown
  • сбрасывается активный пункт навигации
  • прекращается ввод поиска

Важно учитывать, что blur() влияет только на активный DOM-фокус, но не изменяет выбранные значения.

Программное открытие и закрытие при управлении фокусом

Фокус и состояние раскрытия списка могут управляться отдельно:

select.focus();  // устанавливает фокус
select.open();   // принудительно открывает список

И наоборот:

select.close();  // закрывает список
select.blur();   // снимает фокус

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

Автоматическая установка фокуса при инициализации

Фокус может быть установлен сразу после создания экземпляра, однако из-за особенностей рендеринга DOM это требует аккуратного вызова.

const select = new TomSelect("#select");

requestAnimationFrame(() => {
  select.focus();
});

Вариант с setTimeout также распространён:

setTimeout(() => {
  select.focus();
}, 0);

Такой подход гарантирует, что DOM-элементы полностью инициализированы.

Управление фокусом после динамического добавления элементов

При создании селекта динамически важно учитывать момент, когда элемент добавляется в DOM:

const el = document.createElement("select");
document.body.appendChild(el);

const select = new TomSelect(el);

select.focus();

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

Взаимодействие с disabled-состоянием

Фокусировка невозможна, если компонент или исходный <select> находится в состоянии disabled.

const select = new TomSelect("#select", {
  disabled: true
});

select.focus(); // не даст эффекта

Даже при вызове метода DOM-фокус не устанавливается, а выпадающий список не активируется.

Поведение фокуса при выборе и поиске

Фокус в Tom Select тесно связан с внутренним input:

  • при вводе текста он остаётся активным
  • при выборе значения может сохраняться или теряться в зависимости от конфигурации
  • при закрытии списка фокус может оставаться внутри компонента

Особенно важно поведение при maxItems > 1, где ввод продолжается после выбора:

const select = new TomSelect("#select", {
  maxItems: 3,
  closeAfterSelect: false
});

В этом режиме фокус не покидает поле после каждого выбора.

Программная синхронизация фокуса и состояния dropdown

Часто требуется синхронное управление:

select.focus();
select.open();

Однако порядок вызовов влияет на поведение:

  • focus() → затем open() обеспечивает корректную активацию input
  • open() → затем focus() может привести к повторной перерисовке состояния

Оптимальная последовательность зависит от конфигурации openOnFocus.

Потеря фокуса при внешних действиях

Фокус автоматически снимается при:

  • клике вне компонента
  • программном вызове blur()
  • разрушении экземпляра (destroy())
select.destroy();

После уничтожения экземпляра любые вызовы focus() становятся невалидными.

Фокус и клавиатурная навигация

При активном фокусе Tom Select перехватывает клавиатурные события:

  • стрелки вверх/вниз — навигация по списку
  • Enter — выбор элемента
  • Esc — закрытие списка
select.focus();

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

Программное восстановление фокуса

В интерфейсах с модальными окнами или динамическими панелями часто требуется восстановление фокуса:

const lastFocused = select;

modal.close = () => {
  lastFocused.focus();
};

Такой подход обеспечивает непрерывность взаимодействия и предотвращает потерю контекста ввода.

Работа с внутренним input-элементом

Хотя основным способом управления остаётся focus(), доступен и прямой доступ к внутреннему полю:

select.control_input.focus();

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

Особенности поведения в множественных селектах

При нескольких экземплярах на странице важно учитывать конкуренцию фокуса:

select1.focus();
select2.focus(); // перебивает фокус

Фокус всегда принадлежит последнему активированному компоненту, поэтому при сложных формах часто используется централизованное управление состоянием.

Фокус и виртуальные сценарии взаимодействия

При программном управлении интерфейсом (например, при заполнении формы автоматически) фокус может быть распределён по шагам:

select1.focus();

select1.on("change", () => {
  select2.focus();
});

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

Ограничения программного управления

Некоторые ограничения фокусировки:

  • невозможность фокусировки скрытых элементов (display: none)
  • блокировка при disabled
  • игнорирование вызова до полной инициализации DOM
  • потеря фокуса при повторной инициализации экземпляра

Эти ограничения связаны с тем, что Tom Select опирается на стандартные механизмы браузерного фокуса.

Сценарии повторной активации

При повторном открытии интерфейса часто требуется восстановление состояния:

select.close();
select.focus();
select.open();

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

Контроль фокуса в асинхронных сценариях

При загрузке данных из API фокус может устанавливаться после обновления опций:

fetch("/data")
  .then(res => res.json())
  .then(data => {
    select.addOptions(data);
    select.refreshOptions(false);
    select.focus();
  });

Фокус должен устанавливаться после обновления списка, иначе UI может не отобразить активное состояние корректно.

Оглавление