Параметр allowOutsideClick

Библиотека Focus-trap используется для ограничения фокуса внутри определённого DOM-элемента, что особенно важно при реализации модальных окон, всплывающих меню, диалогов и любых интерактивных компонентов, где фокус должен оставаться внутри контейнера до его закрытия. Одним из ключевых параметров настройки поведения является allowOutsideClick.

Назначение параметра

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

Типы значения

allowOutsideClick может принимать несколько видов значений:

Булево значение (true / false):

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

Функция (event) => boolean:

Позволяет задать динамическое поведение. Функция получает объект события MouseEvent и должна возвращать true или false в зависимости от условий. Например:

allowOutsideClick: (event) => {
  // Разрешить клик только если он не по определённой кнопке
  return !event.target.closest('.no-click-block');
}

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

Влияние на UX

Использование allowOutsideClick влияет на пользовательский опыт следующим образом:

С сохранением блокировки (false): предотвращает случайное закрытие модальных окон или перемещение фокуса на другие интерактивные элементы страницы. Это важно для форм и подтверждающих диалогов.
С разрешением кликов (true или функция): предоставляет пользователю возможность взаимодействовать с фоновым контентом, не нарушая активность модального окна. Это может быть полезно для “ненавязчивых” панелей уведомлений или всплывающих подсказок, где полная блокировка не требуется.

Взаимодействие с другими параметрами

allowOutsideClick тесно связана с другими параметрами Focus-trap:

clickOutsideDeactivates — при значении true клик вне контейнера не только разрешён, но и деактивирует трап фокуса. В отличие от allowOutsideClick, который управляет только пропуском клика, clickOutsideDeactivates управляет состоянием трапа.
onDeactivate — функция обратного вызова, вызываемая при деактивации трапа. Комбинация с allowOutsideClick и clickOutsideDeactivates позволяет реализовать сложную логику закрытия модальных окон или панелей.
escapeDeactivates — при нажатии клавиши Escape трап фокуса может быть деактивирован. Взаимодействие с allowOutsideClick не конфликтует, но важно учитывать, что оба параметра управляют разными способами выхода из трапа.

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

Пример 1: Разрешение кликов на фоне

const modalTrap = createFocusTrap('#modal', {
  allowOutsideClick: true,
  escapeDeactivates: true
});

modalTrap.activate();

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

Пример 2: Условное разрешение кликов

const trap = createFocusTrap('#tooltip', {
  allowOutsideClick: (event) => !event.target.closest('.tooltip-ignore'),
});

trap.activate();

Только клики по элементам с классом .tooltip-ignore будут блокироваться, остальные клики проходят без препятствий.