Предотвращение закрытия

Radix UI предоставляет низкоуровневые, полностью доступные и настраиваемые компоненты для React. Один из ключевых аспектов пользовательского интерфейса — управление открытием и закрытием интерактивных элементов, таких как Dropdown, Dialog, Popover, Menu, Accordion. В сложных интерфейсах часто требуется предотвращение автоматического закрытия при определённых условиях, и Radix UI предоставляет для этого гибкие механизмы.

Controlled vs Uncontrolled компоненты

Radix UI поддерживает два подхода к управлению состоянием:

  1. Uncontrolled (неконтролируемый) — компонент управляет своим состоянием внутренне. Пример: Popover.Root автоматически закрывается при клике вне области.
  2. Controlled (контролируемый) — состояние открытости полностью контролируется через проп open и событие onOpenChange. Этот подход необходим, когда требуется предотвращать закрытие в некоторых сценариях.

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

import * as Popover from '@radix-ui/react-popover';
import { useState } from 'react';

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <Popover.Root open={open} onOpenCha nge={(nextOpen) => {
      if (!shouldPreventClose()) {
        setOpen(nextOpen);
      }
    }}>
      <Popover.Trigger>Открыть поповер</Popover.Trigger>
      <Popover.Content>
        Контент поповера
      </Popover.Content>
    </Popover.Root>
  );
}

function shouldPreventClose() {
  // Логика для предотвращения закрытия
  return false; // пример: всегда разрешать закрытие
}

Ключевой момент: проп onOpenChange предоставляет значение true или false, которое показывает, собирается ли компонент открыться или закрыться. Внутри обработчика можно реализовать условие для отмены закрытия.

Использование onInteractOutside и onEscapeKeyDown

Radix UI позволяет полностью управлять событиями закрытия через события взаимодействия:

  • onInteractOutside — срабатывает при клике вне компонента.
  • onEscapeKeyDown — срабатывает при нажатии клавиши Escape.

Эти события можно перехватывать и предотвращать стандартное закрытие:

<Popover.Content
  onInteractOuts ide={(event) => {
    if (shouldPreventClose()) {
      event.preventDefault(); // отменяет закрытие при клике вне
    }
  }}
  onEscapeKeyD own={(event) => {
    if (shouldPreventClose()) {
      event.preventDefault(); // отменяет закрытие при Escape
    }
  }}
>
  Контент поповера
</Popover.Content>

event.preventDefault() полностью блокирует стандартное поведение закрытия, что позволяет реализовать сложную логику — например, подтверждение действий перед закрытием или блокировку закрытия при незавершённой форме внутри диалога.

Предотвращение закрытия при взаимодействии с дочерними элементами

Частая задача — запрещать закрытие при взаимодействии с определёнными внутренними элементами. Radix UI использует концепцию asChild и возможность проверки таргета события:

<Popover.Content
  onInteractOuts ide={(event) => {
    if (event.target.closest('.prevent-close')) {
      event.preventDefault();
    }
  }}
>
  <div className="prevent-close">
    Клик сюда не закроет поповер
  </div>
</Popover.Content>

closest() позволяет проверять, принадлежит ли элемент определённой группе, и предотвращать закрытие только для этой группы, оставляя обычное закрытие для остальной области.

Управление закрытием в динамических интерфейсах

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

  1. Использовать контролируемое состояние (open + onOpenChange).
  2. Перехватывать onInteractOutside и onEscapeKeyDown.
  3. Проверять дополнительные условия — статус формы, завершённость действий, активность подкомпонентов.
  4. Вызывать setOpen(false) только при удовлетворении всех условий.

Пример:

function handleOpenChange(nextOpen) {
  if (nextOpen === false && hasUnsavedChanges()) {
    alert('Есть несохранённые изменения!');
    return; // не закрываем
  }
  setOpen(nextOpen);
}

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

Рекомендации по предотвращению закрытия

  • Для всех интерактивных компонентов (Dialog, Popover, DropdownMenu) использовать контролируемый режим, если требуется логика отмены закрытия.
  • Всегда проверять, на каком событии нужно блокировать закрытие: клик вне (onInteractOutside) или Escape (onEscapeKeyDown).
  • Для сложных вложенных компонентов применять проверку event.target.closest() или ref для дочерних элементов.
  • В интерфейсах с формами или подменю обязательно учитывать состояния данных перед вызовом setOpen(false).

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

Оглавление