Escape Keydown

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

Использование useDisclosure для управления модальными окнами

Компонент Modal в Chakra UI тесно интегрирован с хук useDisclosure. Этот хук позволяет легко управлять состоянием открытия и закрытия модального окна. Одним из ключевых аспектов является закрытие модального окна при нажатии Escape.

import { useDisclosure, Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@chakra-ui/react";

function ExampleModal() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onCl ick={onOpen}>Открыть модальное окно</Button>
      <Modal isOpen={isOpen} onCl ose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Заголовок</ModalHeader>
          <ModalBody>
            Контент модального окна
          </ModalBody>
          <ModalFooter>
            <Button onCl ick={onClose}>Закрыть</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}

В этом примере onClose вызывается автоматически при нажатии клавиши Escape благодаря встроенной поддержке Chakra UI. Это поведение можно настроить через проп closeOnEsc.

<Modal isOpen={isOpen} onCl ose={onClose} closeOnEsc={false}>

Установка closeOnEsc={false} отключает закрытие при Escape, что позволяет реализовать кастомную логику.

Перехват события Escape для кастомной логики

Иногда требуется не просто закрыть модальное окно, а выполнить дополнительное действие при нажатии Escape. Для этого можно использовать хук useEffect с прослушкой события keydown.

import { useEffect } from "react";

function useEscapeKey(callback) {
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === "Escape") {
        callback();
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [callback]);
}

Пример интеграции с модальным окном:

function CustomModal({ isOpen, onClose }) {
  useEscapeKey(() => {
    console.log("Escape нажата!");
    onClose();
  });

  return (
    <Modal isOpen={isOpen} onCl ose={onClose} closeOnEsc={false}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>Кастомное модальное окно</ModalHeader>
        <ModalBody>Контент с обработкой Escape</ModalBody>
        <ModalFooter>
          <Button onCl ick={onClose}>Закрыть</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}

Обработка Escape в других компонентах

Escape Keydown часто требуется для закрытия Drawer, Menu и других компонентов.

  • Drawer
<Drawer isOpen={isOpen} onCl ose={onClose} closeOnEsc={true}>
  <DrawerOverlay />
  <DrawerContent>
    <DrawerHeader>Заголовок</DrawerHeader>
    <DrawerBody>Содержимое</DrawerBody>
    <DrawerFooter>
      <Button onCl ick={onClose}>Закрыть</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
  • Menu
<Menu closeOnSelect={true}>
  <MenuButton as={Button}>Меню</MenuButton>
  <MenuList>
    <MenuItem>Элемент 1</MenuItem>
    <MenuItem>Элемент 2</MenuItem>
  </MenuList>
</Menu>

В Menu закрытие при Escape происходит автоматически, если меню открыто.

Особенности работы с фокусом

При обработке Escape важно учитывать фокус. Chakra UI использует фокус-трап в Modal и Drawer, чтобы нажатие Escape корректно закрывало компонент и возвращало фокус на исходный элемент. При кастомной реализации необходимо вручную управлять фокусом:

import { useRef } from "react";

const buttonRef = useRef();

function handleClose() {
  buttonRef.current.focus();
}

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

Суммирование лучших практик

  • Использовать встроенные пропсы closeOnEsc для стандартного поведения.
  • Для кастомной логики — применять useEffect с обработчиком keydown.
  • Всегда учитывать фокус, особенно при модальных окнах и Drawer.
  • Проверять совместимость с другими клавишами и сочетаниями для предотвращения конфликтов.

Эти подходы позволяют создавать интерфейсы с корректной и предсказуемой реакцией на Escape, улучшая UX и доступность приложений на Chakra UI.

Оглавление