Function useFocus

packages/react-aria/src/interactions/useFocus.ts:38–91

(
  props: FocusProps<Target>
)

 * Focus events on child elements will be ignored.
 */
export function useFocus<Target extends FocusableElement = FocusableElement>(
  props: FocusProps<Target>
): FocusResult<Target> {
  let {isDisabled, onFocus: onFocusProp, onBlur: onBlurProp, onFocusChange} = props;

  const onBlur: FocusProps<Target>['onBlur'] = useCallback(
    (e: FocusEvent<Target>) => {
      if (getEventTarget(e) === e.currentTarget) {
        if (onBlurProp) {
          onBlurProp(e);
        }

        if (onFocusChange) {
          onFocusChange(false);
        }

        return true;
      }
    },
    [onBlurProp, onFocusChange]
  );

  const onSyntheticFocus = useSyntheticBlurEvent<Target>(onBlur);

  const onFocus: FocusProps<Target>['onFocus'] = useCallback(
    (e: FocusEvent<Target>) => {
      // Double check that document.activeElement actually matches e.target in case a previously chained
      // focus handler already moved focus somewhere else.

      let eventTarget = getEventTarget(e);
      const ownerDocument = getOwnerDocument(eventTarget);
      const activeElement = ownerDocument ? getActiveElement(ownerDocument) : getActiveElement();
      if (eventTarget === e.currentTarget && eventTarget === activeElement) {
        if (onFocusProp) {
          onFocusProp(e);
        }

        if (onFocusChange) {
          onFocusChange(true);
        }

        onSyntheticFocus(e);
      }
    },
    [onFocusChange, onFocusProp, onSyntheticFocus]
  );

  return {
    focusProps: {
      onFocus: !isDisabled && (onFocusProp || onFocusChange || onBlurProp) ? onFocus : undefined,
      onBlur: !isDisabled && (onBlurProp || onFocusChange) ? onBlur : undefined
    }
  };
}