useSyntheticBlurEvent для blur событий

useSyntheticBlurEvent — это хук из библиотеки React Aria, предназначенный для управления blur-событиями на компонентах пользовательского интерфейса. В отличие от стандартного обработчика onBlur в React, этот хук обеспечивает кросс-браузерную совместимость, корректное отслеживание фокусировки внутри сложных компонентов и удобное создание синтетических событий blur.

Основные возможности

  1. Контроль потери фокуса внутри сложных компонентов В компонентах с вложенными элементами (например, комбинированные инпуты или выпадающие списки) стандартный onBlur срабатывает для каждого дочернего элемента. useSyntheticBlurEvent позволяет отслеживать событие потери фокуса только тогда, когда фокус действительно уходит из всего компонента, а не из отдельного вложенного элемента.

  2. Синтетическое событие blur Хук генерирует синтетическое событие, которое расширяет стандартное FocusEvent и предоставляет следующие возможности:

    • relatedTarget — элемент, на который перешёл фокус.
    • target — элемент, который теряет фокус.
    • Удобные методы для предотвращения стандартного поведения и остановки всплытия.

  3. Интеграция с другими хуками React Aria useSyntheticBlurEvent хорошо сочетается с хуками useFocusRing, useFocusWithin, и другими, обеспечивая комплексное управление фокусом и доступностью.

Синтаксис и структура

import { useSyntheticBlurEvent } from '@react-aria/interactions';

const ref = useRef(null);

const { onBlur } = useSyntheticBlurEvent({
  onBlur: (e) => {
    console.log('Событие blur сработало', e);
  },
  onFocusChange: (isFocused) => {
    console.log('Состояние фокуса', isFocused);
  }
});

return 
Контент
;

Параметры хука:

  • onBlur: (event) => void — функция-обработчик, вызываемая при синтетическом blur.
  • onFocusChange: (isFocused: boolean) => void — отслеживает состояние фокуса компонента целиком. Возвращает true, если компонент или его потомки в фокусе, и false, если фокус покинул компонент.

Возвращаемые значения:

  • onBlur — пропсы, которые нужно передать оборачиваемому элементу для корректной работы синтетического blur.

Особенности работы с вложенными элементами

При использовании стандартного onBlur каждый дочерний элемент вызывает событие при потере фокуса, что приводит к нежелательному поведению:

 console.log('blur')} />

useSyntheticBlurEvent устраняет этот эффект, проверяя фокус внутри компонента и его потомков. Это особенно важно для:

  • Компонентов с несколькими интерактивными элементами (инпут + кнопка очистки)
  • Меню и выпадающих списков
  • Сложных форм с динамически добавляемыми полями

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

import { useSyntheticBlurEvent } from '@react-aria/interactions';
import { useRef, useState } from 'react';

function CustomInput() {
  const ref = useRef(null);
  const [focused, setFocused] = useState(false);

  const { onBlur } = useSyntheticBlurEvent({
    onBlur: (e) => {
      console.log('Потеря фокуса всего компонента', e.target);
    },
    onFocusChange: (isFocused) => {
      setFocused(isFocused);
    }
  });

  return (
    

      
      
    

  );
}

В этом примере:

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

Важные моменты и рекомендации

  1. Использовать вместе с useRef Хук требует ссылку на DOM-элемент, чтобы отслеживать фокус внутри компонента.

  2. Совместимость с React 18+ Реализация синтетических событий построена на современном API React и PointerEvent, что обеспечивает корректную работу во всех поддерживаемых браузерах.

  3. Поддержка TypeScript useSyntheticBlurEvent имеет встроенные типы, позволяющие точно указывать тип события и состояния фокуса, минимизируя ошибки при разработке.

  4. Не заменяет onFocus полностью Для отслеживания отдельных внутренних элементов или логики по наведению лучше использовать onFocus или useFocusRing.

Выводы по применению

  • useSyntheticBlurEvent идеален для сложных компонентов с несколькими интерактивными элементами.
  • Позволяет точно отслеживать полный уход фокуса из компонента.
  • Обеспечивает совместимость и предотвращает баги с множественными onBlur на дочерних элементах.
  • Интегрируется с другими хуками React Aria, поддерживая доступность и стандарты ARIA.
Оглавление