pause()

Метод pause() используется для временной приостановки работы ловушки фокуса (focus trap) без её полной деактивации. При вызове этого метода библиотека прекращает контроль над перемещением фокуса, однако состояние ловушки и её конфигурация сохраняются. Это позволяет позже возобновить её работу с помощью метода unpause() без необходимости повторной инициализации.

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

Назначение временной приостановки ловушки фокуса

Основная задача pause() — временно отключить ограничение перемещения фокуса, сохранив при этом активную структуру ловушки.

В обычной ситуации активная focus trap:

  • ограничивает навигацию клавишей Tab внутри контейнера;
  • предотвращает выход фокуса за пределы заданной области;
  • перехватывает попытки клика или программного перемещения фокуса за пределы ловушки.

После вызова pause():

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

Это отличие принципиально важно: ловушка не уничтожается, а лишь временно перестаёт вмешиваться в управление фокусом.

Синтаксис

trap.pause();

Где trap — объект ловушки, созданный функцией createFocusTrap.

Поведение после вызова pause()

Приостановка ловушки вызывает ряд внутренних изменений:

  1. Отключаются обработчики событий, контролирующие перемещение фокуса.
  2. Перестаёт работать циклическая навигация Tab внутри контейнера.
  3. Перестаёт применяться логика возврата фокуса при попытке покинуть область.

При этом сохраняются:

  • текущий активный элемент;
  • список фокусируемых элементов;
  • конфигурация ловушки;
  • связь с контейнером.

Благодаря этому последующий вызов unpause() восстанавливает работу практически мгновенно.

Отличие pause() от deactivate()

Методы pause() и deactivate() решают разные задачи.

pause()

  • временная остановка;
  • ловушка остаётся активированной;
  • состояние сохраняется;
  • можно продолжить через unpause().

deactivate()

  • полное отключение ловушки;
  • удаляются обработчики событий;
  • происходит возврат фокуса (если включена опция returnFocus);
  • для повторного использования требуется новая активация.

Сравнение:

Метод Состояние ловушки Возможность возобновления
pause() сохранено через unpause()
deactivate() завершено требуется activate()

Типичный сценарий использования

Одним из распространённых случаев применения pause() является вложенный модальный интерфейс.

Пример:

  • открыта модальная форма;
  • внутри неё появляется дополнительное всплывающее окно;
  • управление фокусом должно временно перейти к новому элементу.

Пример

import { createFocusTrap } from 'focus-trap';

const modalTrap = createFocusTrap('#modal');
const popupTrap = createFocusTrap('#popup');

modalTrap.activate();

function openPopup() {
  modalTrap.pause();
  popupTrap.activate();
}

function closePopup() {
  popupTrap.deactivate();
  modalTrap.unpause();
}

В такой архитектуре:

  1. основная модальная ловушка активна;
  2. при открытии вложенного окна она приостанавливается;
  3. новая ловушка получает контроль над фокусом;
  4. после закрытия всплывающего окна управление возвращается.

Вложенные ловушки фокуса

Focus Trap поддерживает сценарии с несколькими ловушками. Метод pause() играет ключевую роль при управлении их взаимодействием.

Без приостановки может возникнуть конфликт:

  • две ловушки одновременно пытаются контролировать фокус;
  • навигация Tab становится непредсказуемой;
  • фокус может «прыгать» между контейнерами.

Корректная стратегия:

  1. при появлении новой ловушки — приостановить предыдущую;
  2. после закрытия — восстановить её.

Схема взаимодействия:

Основная ловушка
      ↓ pause()
Вложенная ловушка
      ↓ deactivate()
Основная ловушка
      ↓ unpause()

Работа с обработчиками событий

Во время паузы библиотека временно отключает обработчики:

  • keydown
  • focusin
  • mousedown
  • touchstart
  • click

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

Однако сама структура объекта остаётся в памяти и продолжает хранить ссылки на контейнеры и параметры.

Взаимодействие с клавишей Tab

Активная ловушка:

  • отслеживает нажатия Tab и Shift+Tab;
  • обеспечивает циклическую навигацию между элементами.

Во время паузы:

  • клавиша Tab работает по стандартным правилам браузера;
  • фокус может выйти за пределы контейнера;
  • циклическая навигация отключается.

После unpause() поведение полностью восстанавливается.

Повторный вызов pause()

Метод безопасен при повторных вызовах.

Если ловушка уже находится в состоянии паузы:

trap.pause();
trap.pause();

дополнительные вызовы не вызывают ошибок и не меняют состояние.

Это реализовано через внутренний флаг паузы.

Проверка состояния

Внутреннее состояние ловушки содержит признак paused. Хотя он не всегда используется напрямую разработчиками, он участвует во внутренней логике библиотеки:

  • предотвращает повторное отключение обработчиков;
  • обеспечивает корректную работу unpause().

Связь с методом unpause()

Метод pause() всегда предполагает возможность последующего восстановления.

Возобновление выполняется следующим образом:

trap.unpause();

После этого:

  • возвращаются обработчики событий;
  • снова активируется контроль фокуса;
  • циклическая навигация восстанавливается.

Важно, что фокус не принудительно перемещается — управление просто возвращается библиотеке.

Пример сложного интерфейса

Интерфейс с несколькими уровнями взаимодействия:

  • основной модальный диалог
  • всплывающее подтверждение
  • дополнительная справка
const modalTrap = createFocusTrap('#modal');
const confirmTrap = createFocusTrap('#confirm');
const helpTrap = createFocusTrap('#help');

modalTrap.activate();

function openConfirm() {
  modalTrap.pause();
  confirmTrap.activate();
}

function openHelp() {
  confirmTrap.pause();
  helpTrap.activate();
}

function closeHelp() {
  helpTrap.deactivate();
  confirmTrap.unpause();
}

function closeConfirm() {
  confirmTrap.deactivate();
  modalTrap.unpause();
}

Такая архитектура обеспечивает:

  • строгий контроль фокуса;
  • отсутствие конфликтов между ловушками;
  • корректную навигацию клавиатурой.

Практические преимущества использования pause()

1. Повторное использование ловушек

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

2. Производительность

Минимизируется количество операций инициализации.

3. Управление сложными интерфейсами

Упрощается работа с многоуровневыми диалогами.

4. Сохранение состояния

Фокусируемые элементы и настройки не пересчитываются.

Внутренняя логика реализации

Внутри библиотеки метод pause():

  1. проверяет активность ловушки;
  2. устанавливает состояние paused;
  3. отключает связанные обработчики событий;
  4. оставляет объект ловушки в списке активных экземпляров.

Эта архитектура позволяет быстро переключаться между несколькими ловушками без перерасчёта DOM-структуры.

Когда использование pause() оправдано

Метод применяется в случаях:

  • вложенные модальные окна;
  • всплывающие панели внутри модального интерфейса;
  • временная передача управления фокусом;
  • многоуровневые интерфейсы редактирования;
  • сложные компоненты с динамическими диалогами.

В подобных системах pause() обеспечивает гибкое управление фокусом и предотвращает конфликты между различными областями интерфейса.

Оглавление