unpause()

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

Focus Trap применяется для ограничения навигации по элементам интерфейса в пределах конкретного контейнера — например, модального окна, панели настроек или диалогового интерфейса. При активной ловушке фокуса пользователь не может переместить фокус за пределы указанной области при помощи клавиатуры. Метод unpause() возвращает это поведение после временной паузы.

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

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

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

Вместо полной деактивации ловушки используется метод pause(), который временно отключает обработку фокуса. При этом состояние ловушки сохраняется: контейнер, настройки и внутренние обработчики не уничтожаются.

Метод unpause() возвращает ловушку в активное состояние.

Принцип работы unpause()

Внутренний механизм Focus Trap отслеживает состояние каждой ловушки. Существует несколько возможных состояний:

  • активная ловушка — полностью управляет фокусом;
  • приостановленная ловушка — временно не вмешивается в навигацию;
  • деактивированная ловушка — полностью отключена и удаляет обработчики.

При вызове unpause() происходит следующее:

  1. Проверяется, находится ли ловушка в состоянии паузы.
  2. Восстанавливаются обработчики событий клавиатуры и фокуса.
  3. Активируется логика циклической навигации по элементам.
  4. Контроль фокуса возвращается контейнеру ловушки.

Если ловушка не была приостановлена, вызов unpause() не приводит к изменению состояния.

Синтаксис

focusTrap.unpause();

Метод не принимает аргументов и не возвращает значения.

Базовый пример использования

Создание ловушки фокуса:

import { createFocusTrap } from 'focus-trap';

const modal = document.querySelector('#modal');

const trap = createFocusTrap(modal);

trap.activate();

Временная приостановка:

trap.pause();

Возобновление работы ловушки:

trap.unpause();

После вызова unpause() фокус снова будет ограничен элементами внутри контейнера modal.

Поведение после возобновления

После восстановления ловушки фокуса библиотека выполняет несколько внутренних операций:

1. Проверка текущего фокуса

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

2. Восстановление циклической навигации

Клавиша Tab снова начинает перемещать фокус только между элементами внутри контейнера.

3. Перехват событий

Восстанавливаются обработчики:

  • keydown
  • focusin
  • click

Эти события используются для контроля перемещения фокуса.

Использование при вложенных модальных окнах

Типичная ситуация применения unpause() возникает при наличии нескольких модальных интерфейсов.

Основное модальное окно

const mainTrap = createFocusTrap(mainModal);
mainTrap.activate();

Открытие вложенного окна

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

mainTrap.pause();

const nestedTrap = createFocusTrap(nestedModal);
nestedTrap.activate();

Закрытие вложенного окна

После закрытия вложенного интерфейса:

nestedTrap.deactivate();
mainTrap.unpause();

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

Различие между unpause() и activate()

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

Метод Назначение
activate() включает ловушку фокуса с нуля
pause() временно отключает активную ловушку
unpause() возвращает ловушку из состояния паузы

activate() создаёт активное состояние независимо от предыдущего.

unpause() работает только с уже существующей ловушкой, ранее приостановленной.

Управление стеком ловушек

Focus Trap поддерживает стек активных ловушек. Когда появляется новая ловушка, предыдущая может быть приостановлена.

Внутренний механизм обеспечивает корректное переключение между ними.

Пример последовательности:

  1. Активируется ловушка A.
  2. Активируется ловушка B.
  3. Ловушка A автоматически приостанавливается.
  4. После деактивации B ловушка A может быть возобновлена.

В таких сценариях unpause() используется для возврата управления предыдущему интерфейсу.

Поведение при множественных паузах

Если метод pause() вызывается несколько раз подряд, состояние ловушки остаётся «приостановленным».

Метод unpause() возвращает ловушку в активное состояние независимо от количества предыдущих вызовов pause().

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

Сценарии практического применения

Всплывающие меню внутри модального окна

Модальное окно содержит кнопку, открывающую контекстное меню.

modalTrap.pause();
menuTrap.activate();

После закрытия меню:

menuTrap.deactivate();
modalTrap.unpause();

Панели автодополнения

Некоторые интерфейсы временно передают управление фокусом компоненту автодополнения.

dialogTrap.pause();
autocompleteTrap.activate();

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

autocompleteTrap.deactivate();
dialogTrap.unpause();

Сложные интерфейсы с несколькими уровнями диалогов

В административных панелях или IDE-интерфейсах могут одновременно использоваться:

  • модальные окна
  • боковые панели
  • всплывающие настройки
  • контекстные диалоги

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

Внутренняя архитектура метода

Внутри Focus Trap метод unpause() выполняет несколько действий:

  1. Проверяет флаг состояния paused.
  2. Сбрасывает этот флаг.
  3. Повторно подключает обработчики событий.
  4. Восстанавливает контроль над фокусом.

Обработчики обычно привязываются к объекту document:

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

Особенности взаимодействия с браузером

Метод unpause() учитывает особенности поведения фокуса в разных браузерах.

Некоторые браузеры могут:

  • автоматически перемещать фокус при изменении DOM;
  • переносить фокус на body;
  • игнорировать фокусируемость некоторых элементов.

После возобновления ловушки библиотека выполняет проверку допустимого элемента фокуса и при необходимости корректирует его.

Типичные ошибки при использовании

Попытка вызвать unpause() после deactivate()

После полной деактивации ловушки её состояние сбрасывается.

trap.deactivate();
trap.unpause(); // эффекта не будет

В таких случаях требуется повторная активация:

trap.activate();

Отсутствие паузы перед вложенной ловушкой

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

Корректный порядок:

pause → activate → deactivate → unpause

Потеря ссылки на ловушку

Если объект ловушки не сохраняется, вызвать unpause() невозможно.

Неправильный подход:

createFocusTrap(modal).activate();

Корректный вариант:

const trap = createFocusTrap(modal);
trap.activate();

Связанные методы

Метод unpause() используется совместно с другими функциями библиотеки.

activate() Запускает ловушку фокуса.

deactivate() Полностью отключает ловушку.

pause() Временно отключает обработку фокуса.

updateContainerElements() Обновляет список контейнеров, участвующих в ловушке.

Практическое значение метода

Использование unpause() обеспечивает гибкое управление навигацией по интерфейсу. Метод позволяет временно передавать контроль фокуса другим компонентам без разрушения текущего состояния ловушки.

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

Оглавление