Function useSyntheticBlurEvent

packages/react-aria/src/interactions/utils.ts:37–111

(
  onBlur: (e: ReactFocusEvent<Target>) => void
)

}

export function useSyntheticBlurEvent<Target extends Element = Element>(
  onBlur: (e: ReactFocusEvent<Target>) => void
): (e: ReactFocusEvent<Target>) => void {
  let stateRef = useRef({
    isFocused: false,
    observer: null as MutationObserver | null
  });

  // Clean up MutationObserver on unmount. See below.

  useLayoutEffect(() => {
    const state = stateRef.current;
    return () => {
      if (state.observer) {
        state.observer.disconnect();
        state.observer = null;
      }
    };
  }, []);

  // This function is called during a React onFocus event.
  return useCallback(
    (e: ReactFocusEvent<Target>) => {
      // React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
      // Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
      // MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
      // For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
      let eventTarget = getEventTarget(e);
      if (
        eventTarget instanceof HTMLButtonElement ||
        eventTarget instanceof HTMLInputElement ||
        eventTarget instanceof HTMLTextAreaElement ||
        eventTarget instanceof HTMLSelectElement
      ) {
        stateRef.current.isFocused = true;

        let target = eventTarget;
        let onBlurHandler: EventListenerOrEventListenerObject | null = e => {
          stateRef.current.isFocused = false;

          if (target.disabled) {
            // For backward compatibility, dispatch a (fake) React synthetic event.
            let event = createSyntheticEvent<ReactFocusEvent<Target>>(e);
            onBlur?.(event);
          }

          // We no longer need the MutationObserver once the target is blurred.
          if (stateRef.current.observer) {
            stateRef.current.observer.disconnect();
            stateRef.current.observer = null;
          }
        };

        target.addEventListener('focusout', onBlurHandler, {once: true});

        stateRef.current.observer = new MutationObserver(() => {
          if (stateRef.current.isFocused && target.disabled) {
            stateRef.current.observer?.disconnect();