@react-aria/interactions 3.23.0 → 3.24.0

package/src/Pressable.tsx

@@ -10,22 +10,82 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes} from '@react-types/shared';
-import {mergeProps, useObjectRef} from '@react-aria/utils';
+import {DOMAttributes, FocusableElement} from '@react-types/shared';
+import {getOwnerWindow, isFocusable, mergeProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {PressProps, usePress} from './usePress';
-import React, {ForwardedRef, ReactElement} from 'react';
+import React, {ForwardedRef, ReactElement, useEffect} from 'react';
+import {useFocusable} from './useFocusable';
 
 interface PressableProps extends PressProps {
   children: ReactElement<DOMAttributes, string>
 }
 
-export const Pressable = React.forwardRef(({children, ...props}: PressableProps, ref: ForwardedRef<HTMLElement>) => {
+export const Pressable = React.forwardRef(({children, ...props}: PressableProps, ref: ForwardedRef<FocusableElement>) => {
   ref = useObjectRef(ref);
   let {pressProps} = usePress({...props, ref});
+  let {focusableProps} = useFocusable(props, ref);
   let child = React.Children.only(children);
+
+  useEffect(() => {
+    let el = ref.current;
+    if (!el || !(el instanceof getOwnerWindow(el).Element)) {
+      console.error('<Pressable> child must forward its ref to a DOM element.');
+      return;
+    }
+
+    if (!isFocusable(el)) {
+      console.warn('<Pressable> child must be focusable. Please ensure the tabIndex prop is passed through.');
+      return;
+    }
+
+    if (
+      el.localName !== 'button' &&
+      el.localName !== 'input' &&
+      el.localName !== 'select' &&
+      el.localName !== 'textarea' &&
+      el.localName !== 'a' &&
+      el.localName !== 'area' &&
+      el.localName !== 'summary'
+    ) {
+      let role = el.getAttribute('role');
+      if (!role) {
+        console.warn('<Pressable> child must have an interactive ARIA role.');
+      } else if (
+        // https://w3c.github.io/aria/#widget_roles
+        role !== 'application' &&
+        role !== 'button' &&
+        role !== 'checkbox' &&
+        role !== 'combobox' &&
+        role !== 'gridcell' &&
+        role !== 'link' &&
+        role !== 'menuitem' &&
+        role !== 'menuitemcheckbox' &&
+        role !== 'menuitemradio' &&
+        role !== 'option' &&
+        role !== 'radio' &&
+        role !== 'searchbox' &&
+        role !== 'separator' &&
+        role !== 'slider' &&
+        role !== 'spinbutton' &&
+        role !== 'switch' &&
+        role !== 'tab' &&
+        role !== 'textbox' &&
+        role !== 'treeitem'
+      ) {
+        console.warn(`<Pressable> child must have an interactive ARIA role. Got "${role}".`);
+      }
+    }
+  }, [ref]);
+
+  // @ts-ignore
+  let childRef = parseInt(React.version, 10) < 19 ? child.ref : child.props.ref;
+
   return React.cloneElement(
     child,
-    // @ts-ignore
-    {ref, ...mergeProps(child.props, pressProps)}
+    {
+      ...mergeProps(pressProps, focusableProps, child.props),
+      // @ts-ignore
+      ref: mergeRefs(childRef, ref)
+    }
   );
 });

package/src/focusSafely.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {FocusableElement} from '@react-types/shared';
+import {
+  focusWithoutScrolling,
+  getActiveElement,
+  getOwnerDocument,
+  runAfterTransition
+} from '@react-aria/utils';
+import {getInteractionModality} from './useFocusVisible';
+
+/**
+ * A utility function that focuses an element while avoiding undesired side effects such
+ * as page scrolling and screen reader issues with CSS transitions.
+ */
+export function focusSafely(element: FocusableElement) {
+  // If the user is interacting with a virtual cursor, e.g. screen reader, then
+  // wait until after any animated transitions that are currently occurring on
+  // the page before shifting focus. This avoids issues with VoiceOver on iOS
+  // causing the page to scroll when moving focus if the element is transitioning
+  // from off the screen.
+  const ownerDocument = getOwnerDocument(element);
+  const activeElement = getActiveElement(ownerDocument);
+  if (getInteractionModality() === 'virtual') {
+    let lastFocusedElement = activeElement;
+    runAfterTransition(() => {
+      // If focus did not move and the element is still in the document, focus it.
+      if (getActiveElement(ownerDocument) === lastFocusedElement && element.isConnected) {
+        focusWithoutScrolling(element);
+      }
+    });
+  } else {
+    focusWithoutScrolling(element);
+  }
+}

package/src/index.ts

@@ -30,6 +30,8 @@ export {useMove} from './useMove';
 export {usePress} from './usePress';
 export {useScrollWheel} from './useScrollWheel';
 export {useLongPress} from './useLongPress';
+export {useFocusable, FocusableProvider, Focusable, FocusableContext} from './useFocusable';
+export {focusSafely} from './focusSafely';
 
 export type {FocusProps, FocusResult} from './useFocus';
 export type {FocusVisibleHandler, FocusVisibleProps, FocusVisibleResult, Modality} from './useFocusVisible';
@@ -42,3 +44,4 @@ export type {PressEvent, PressEvents, MoveStartEvent, MoveMoveEvent, MoveEndEven
 export type {MoveResult} from './useMove';
 export type {LongPressProps, LongPressResult} from './useLongPress';
 export type {ScrollWheelProps} from './useScrollWheel';
+export type {FocusableAria, FocusableOptions, FocusableProviderProps} from './useFocusable';

package/src/textSelection.ts

@@ -46,8 +46,9 @@ export function disableTextSelection(target?: Element) {
   } else if (target instanceof HTMLElement || target instanceof SVGElement) {
     // If not iOS, store the target's original user-select and change to user-select: none
     // Ignore state since it doesn't apply for non iOS
-    modifiedElementMap.set(target, target.style.userSelect);
-    target.style.userSelect = 'none';
+    let property = 'userSelect' in target.style ? 'userSelect' : 'webkitUserSelect';
+    modifiedElementMap.set(target, target.style[property]);
+    target.style[property] = 'none';
   }
 }
 
@@ -85,9 +86,10 @@ export function restoreTextSelection(target?: Element) {
     // Ignore state since it doesn't apply for non iOS
     if (target && modifiedElementMap.has(target)) {
       let targetOldUserSelect = modifiedElementMap.get(target) as string;
+      let property = 'userSelect' in target.style ? 'userSelect' : 'webkitUserSelect';
 
-      if (target.style.userSelect === 'none') {
-        target.style.userSelect = targetOldUserSelect;
+      if (target.style[property] === 'none') {
+        target.style[property] = targetOldUserSelect;
       }
 
       if (target.getAttribute('style') === '') {

package/src/useFocus.ts

@@ -17,7 +17,7 @@
 
 import {DOMAttributes, FocusableElement, FocusEvents} from '@react-types/shared';
 import {FocusEvent, useCallback} from 'react';
-import {getOwnerDocument} from '@react-aria/utils';
+import {getActiveElement, getEventTarget, getOwnerDocument} from '@react-aria/utils';
 import {useSyntheticBlurEvent} from './utils';
 
 export interface FocusProps<Target = FocusableElement> extends FocusEvents<Target> {
@@ -64,8 +64,8 @@ export function useFocus<Target extends FocusableElement = FocusableElement>(pro
     // focus handler already moved focus somewhere else.
 
     const ownerDocument = getOwnerDocument(e.target);
-
-    if (e.target === e.currentTarget && ownerDocument.activeElement === e.target) {
+    const activeElement = ownerDocument ? getActiveElement(ownerDocument) : getActiveElement();
+    if (e.target === e.currentTarget && activeElement === getEventTarget(e.nativeEvent)) {
       if (onFocusProp) {
         onFocusProp(e);
       }

package/src/useFocusVisible.ts

@@ -16,6 +16,7 @@
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
 import {getOwnerDocument, getOwnerWindow, isMac, isVirtualClick} from '@react-aria/utils';
+import {ignoreFocusEvent} from './utils';
 import {useEffect, useState} from 'react';
 import {useIsSSR} from '@react-aria/ssr';
 
@@ -92,7 +93,7 @@ function handleFocusEvent(e: FocusEvent) {
   // Firefox fires two extra focus events when the user first clicks into an iframe:
   // first on the window, then on the document. We ignore these events so they don't
   // cause keyboard focus rings to appear.
-  if (e.target === window || e.target === document) {
+  if (e.target === window || e.target === document || ignoreFocusEvent || !e.isTrusted) {
     return;
   }
 
@@ -108,6 +109,10 @@ function handleFocusEvent(e: FocusEvent) {
 }
 
 function handleWindowBlur() {
+  if (ignoreFocusEvent) {
+    return;
+  }
+
   // When the window is blurred, reset state. This is necessary when tabbing out of the window,
   // for example, since a subsequent focus event won't be fired.
   hasEventBeforeFocus = false;
@@ -176,6 +181,7 @@ const tearDownWindowFocusTracking = (element, loadListener?: () => void) => {
   documentObject.removeEventListener('keydown', handleKeyboardEvent, true);
   documentObject.removeEventListener('keyup', handleKeyboardEvent, true);
   documentObject.removeEventListener('click', handleClickEvent, true);
+
   windowObject.removeEventListener('focus', handleFocusEvent, true);
   windowObject.removeEventListener('blur', handleWindowBlur, false);
 
@@ -284,15 +290,18 @@ const nonTextInputTypes = new Set([
  * focus visible style can be properly set.
  */
 function isKeyboardFocusEvent(isTextInput: boolean, modality: Modality, e: HandlerEvent) {
+  let document = getOwnerDocument(e?.target as Element);
   const IHTMLInputElement = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).HTMLInputElement : HTMLInputElement;
   const IHTMLTextAreaElement = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).HTMLTextAreaElement : HTMLTextAreaElement;
   const IHTMLElement = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).HTMLElement : HTMLElement;
   const IKeyboardEvent = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).KeyboardEvent : KeyboardEvent;
 
+  // For keyboard events that occur on a non-input element that will move focus into input element (aka ArrowLeft going from Datepicker button to the main input group)
+  // we need to rely on the user passing isTextInput into here. This way we can skip toggling focus visiblity for said input element
   isTextInput = isTextInput ||
-    (e?.target instanceof IHTMLInputElement && !nonTextInputTypes.has(e?.target?.type)) ||
-    e?.target instanceof IHTMLTextAreaElement ||
-    (e?.target instanceof IHTMLElement && e?.target.isContentEditable);
+    (document.activeElement instanceof IHTMLInputElement && !nonTextInputTypes.has(document.activeElement.type)) ||
+    document.activeElement instanceof IHTMLTextAreaElement ||
+    (document.activeElement instanceof IHTMLElement && document.activeElement.isContentEditable);
   return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !FOCUS_VISIBLE_INPUT_KEYS[e.key]);
 }
 
@@ -317,6 +326,7 @@ export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyA
 
   useEffect(() => {
     let handler = (modality: Modality, e: HandlerEvent) => {
+      // We want to early return for any keyboard events that occur inside text inputs EXCEPT for Tab and Escape
       if (!isKeyboardFocusEvent(!!(opts?.isTextInput), modality, e)) {
         return;
       }

package/src/useFocusWithin.ts

@@ -17,7 +17,8 @@
 
 import {DOMAttributes} from '@react-types/shared';
 import {FocusEvent, useCallback, useRef} from 'react';
-import {useSyntheticBlurEvent} from './utils';
+import {getActiveElement, getEventTarget, getOwnerDocument, nodeContains, useGlobalListeners} from '@react-aria/utils';
+import {SyntheticFocusEvent, useSyntheticBlurEvent} from './utils';
 
 export interface FocusWithinProps {
   /** Whether the focus within events should be disabled. */
@@ -49,12 +50,20 @@ export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
     isFocusWithin: false
   });
 
+  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
+
   let onBlur = useCallback((e: FocusEvent) => {
+    // Ignore events bubbling through portals.
+    if (!e.currentTarget.contains(e.target)) {
+      return;
+    }
+
     // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
     // when moving focus inside the element. Only trigger if the currentTarget doesn't
     // include the relatedTarget (where focus is moving).
     if (state.current.isFocusWithin && !(e.currentTarget as Element).contains(e.relatedTarget as Element)) {
       state.current.isFocusWithin = false;
+      removeAllGlobalListeners();
 
       if (onBlurWithin) {
         onBlurWithin(e);
@@ -64,13 +73,20 @@ export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
         onFocusWithinChange(false);
       }
     }
-  }, [onBlurWithin, onFocusWithinChange, state]);
+  }, [onBlurWithin, onFocusWithinChange, state, removeAllGlobalListeners]);
 
   let onSyntheticFocus = useSyntheticBlurEvent(onBlur);
   let onFocus = useCallback((e: FocusEvent) => {
+    // Ignore events bubbling through portals.
+    if (!e.currentTarget.contains(e.target)) {
+      return;
+    }
+
     // Double check that document.activeElement actually matches e.target in case a previously chained
     // focus handler already moved focus somewhere else.
-    if (!state.current.isFocusWithin && document.activeElement === e.target) {
+    const ownerDocument = getOwnerDocument(e.target);
+    const activeElement = getActiveElement(ownerDocument);
+    if (!state.current.isFocusWithin && activeElement === getEventTarget(e.nativeEvent)) {
       if (onFocusWithin) {
         onFocusWithin(e);
       }
@@ -81,13 +97,26 @@ export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
 
       state.current.isFocusWithin = true;
       onSyntheticFocus(e);
+
+      // Browsers don't fire blur events when elements are removed from the DOM.
+      // However, if a focus event occurs outside the element we're tracking, we
+      // can manually fire onBlur.
+      let currentTarget = e.currentTarget;
+      addGlobalListener(ownerDocument, 'focus', e => {
+        if (state.current.isFocusWithin && !nodeContains(currentTarget, e.target as Element)) {
+          let event = new SyntheticFocusEvent('blur', new ownerDocument.defaultView!.FocusEvent('blur', {relatedTarget: e.target}));
+          event.target = currentTarget;
+          event.currentTarget = currentTarget;
+          onBlur(event);
+        }
+      }, {capture: true});
     }
-  }, [onFocusWithin, onFocusWithinChange, onSyntheticFocus]);
+  }, [onFocusWithin, onFocusWithinChange, onSyntheticFocus, addGlobalListener, onBlur]);
 
   if (isDisabled) {
     return {
       focusWithinProps: {
-        // These should not have been null, that would conflict in mergeProps
+        // These cannot be null, that would conflict in mergeProps
         onFocus: undefined,
         onBlur: undefined
       }

package/src/useFocusable.tsx

@@ -0,0 +1,183 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {DOMAttributes, FocusableDOMProps, FocusableElement, FocusableProps, RefObject} from '@react-types/shared';
+import {focusSafely} from './';
+import {getOwnerWindow, isFocusable, mergeProps, mergeRefs, useObjectRef, useSyncRef} from '@react-aria/utils';
+import React, {ForwardedRef, forwardRef, MutableRefObject, ReactElement, ReactNode, useContext, useEffect, useRef} from 'react';
+import {useFocus} from './useFocus';
+import {useKeyboard} from './useKeyboard';
+
+export interface FocusableOptions<T = FocusableElement> extends FocusableProps<T>, FocusableDOMProps {
+  /** Whether focus should be disabled. */
+  isDisabled?: boolean
+}
+
+export interface FocusableProviderProps extends DOMAttributes {
+  /** The child element to provide DOM props to. */
+  children?: ReactNode
+}
+
+interface FocusableContextValue extends FocusableProviderProps {
+  ref?: MutableRefObject<FocusableElement | null>
+}
+
+// Exported for @react-aria/collections, which forwards this context.
+/** @private */
+export let FocusableContext = React.createContext<FocusableContextValue | null>(null);
+
+function useFocusableContext(ref: RefObject<FocusableElement | null>): FocusableContextValue {
+  let context = useContext(FocusableContext) || {};
+  useSyncRef(context, ref);
+
+  // eslint-disable-next-line
+  let {ref: _, ...otherProps} = context;
+  return otherProps;
+}
+
+/**
+ * Provides DOM props to the nearest focusable child.
+ */
+export const FocusableProvider = React.forwardRef(function FocusableProvider(props: FocusableProviderProps, ref: ForwardedRef<FocusableElement>) {
+  let {children, ...otherProps} = props;
+  let objRef = useObjectRef(ref);
+  let context = {
+    ...otherProps,
+    ref: objRef
+  };
+
+  return (
+    <FocusableContext.Provider value={context}>
+      {children}
+    </FocusableContext.Provider>
+  );
+});
+
+export interface FocusableAria {
+  /** Props for the focusable element. */
+  focusableProps: DOMAttributes
+}
+
+/**
+ * Used to make an element focusable and capable of auto focus.
+ */
+export function useFocusable<T extends FocusableElement = FocusableElement>(props: FocusableOptions<T>, domRef: RefObject<FocusableElement | null>): FocusableAria {
+  let {focusProps} = useFocus(props);
+  let {keyboardProps} = useKeyboard(props);
+  let interactions = mergeProps(focusProps, keyboardProps);
+  let domProps = useFocusableContext(domRef);
+  let interactionProps = props.isDisabled ? {} : domProps;
+  let autoFocusRef = useRef(props.autoFocus);
+
+  useEffect(() => {
+    if (autoFocusRef.current && domRef.current) {
+      focusSafely(domRef.current);
+    }
+    autoFocusRef.current = false;
+  }, [domRef]);
+
+  // Always set a tabIndex so that Safari allows focusing native buttons and inputs.
+  let tabIndex: number | undefined = props.excludeFromTabOrder ? -1 : 0;
+  if (props.isDisabled) {
+    tabIndex = undefined;
+  }
+
+  return {
+    focusableProps: mergeProps(
+      {
+        ...interactions,
+        tabIndex
+      },
+      interactionProps
+    )
+  };
+}
+
+export interface FocusableComponentProps extends FocusableOptions {
+  children: ReactElement<DOMAttributes, string>
+}
+
+export const Focusable = forwardRef(({children, ...props}: FocusableComponentProps, ref: ForwardedRef<FocusableElement>) => {
+  ref = useObjectRef(ref);
+  let {focusableProps} = useFocusable(props, ref);
+  let child = React.Children.only(children);
+
+  useEffect(() => {
+    let el = ref.current;
+    if (!el || !(el instanceof getOwnerWindow(el).Element)) {
+      console.error('<Focusable> child must forward its ref to a DOM element.');
+      return;
+    }
+
+    if (!props.isDisabled && !isFocusable(el)) {
+      console.warn('<Focusable> child must be focusable. Please ensure the tabIndex prop is passed through.');
+      return;
+    }
+
+    if (
+      el.localName !== 'button' &&
+      el.localName !== 'input' &&
+      el.localName !== 'select' &&
+      el.localName !== 'textarea' &&
+      el.localName !== 'a' &&
+      el.localName !== 'area' &&
+      el.localName !== 'summary' &&
+      el.localName !== 'img' &&
+      el.localName !== 'svg'
+    ) {
+      let role = el.getAttribute('role');
+      if (!role) {
+        console.warn('<Focusable> child must have an interactive ARIA role.');
+      } else if (
+        // https://w3c.github.io/aria/#widget_roles
+        role !== 'application' &&
+        role !== 'button' &&
+        role !== 'checkbox' &&
+        role !== 'combobox' &&
+        role !== 'gridcell' &&
+        role !== 'link' &&
+        role !== 'menuitem' &&
+        role !== 'menuitemcheckbox' &&
+        role !== 'menuitemradio' &&
+        role !== 'option' &&
+        role !== 'radio' &&
+        role !== 'searchbox' &&
+        role !== 'separator' &&
+        role !== 'slider' &&
+        role !== 'spinbutton' &&
+        role !== 'switch' &&
+        role !== 'tab' &&
+        role !== 'tabpanel' &&
+        role !== 'textbox' &&
+        role !== 'treeitem' &&
+        // aria-describedby is also announced on these roles
+        role !== 'img' &&
+        role !== 'meter' &&
+        role !== 'progressbar'
+      ) {
+        console.warn(`<Focusable> child must have an interactive ARIA role. Got "${role}".`);
+      }
+    }
+  }, [ref, props.isDisabled]);
+
+  // @ts-ignore
+  let childRef = parseInt(React.version, 10) < 19 ? child.ref : child.props.ref;
+
+  return React.cloneElement(
+    child,
+    {
+      ...mergeProps(focusableProps, child.props),
+      // @ts-ignore
+      ref: mergeRefs(childRef, ref)
+    }
+  );
+});

package/src/useHover.ts

@@ -16,6 +16,7 @@
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
 import {DOMAttributes, HoverEvents} from '@react-types/shared';
+import {getOwnerDocument, nodeContains, useGlobalListeners} from '@react-aria/utils';
 import {useEffect, useMemo, useRef, useState} from 'react';
 
 export interface HoverProps extends HoverEvents {
@@ -100,6 +101,7 @@ export function useHover(props: HoverProps): HoverResult {
   }).current;
 
   useEffect(setupGlobalTouchEvents, []);
+  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
 
   let {hoverProps, triggerHoverEnd} = useMemo(() => {
     let triggerHoverStart = (event, pointerType) => {
@@ -112,6 +114,16 @@ export function useHover(props: HoverProps): HoverResult {
       let target = event.currentTarget;
       state.target = target;
 
+      // When an element that is hovered over is removed, no pointerleave event is fired by the browser,
+      // even though the originally hovered target may have shrunk in size so it is no longer hovered.
+      // However, a pointerover event will be fired on the new target the mouse is over.
+      // In Chrome this happens immediately. In Safari and Firefox, it happens upon moving the mouse one pixel.
+      addGlobalListener(getOwnerDocument(event.target), 'pointerover', e => {
+        if (state.isHovered && state.target && !nodeContains(state.target, e.target as Element)) {
+          triggerHoverEnd(e, e.pointerType);
+        }
+      }, {capture: true});
+
       if (onHoverStart) {
         onHoverStart({
           type: 'hoverstart',
@@ -128,15 +140,17 @@ export function useHover(props: HoverProps): HoverResult {
     };
 
     let triggerHoverEnd = (event, pointerType) => {
+      let target = state.target;
       state.pointerType = '';
       state.target = null;
 
-      if (pointerType === 'touch' || !state.isHovered) {
+      if (pointerType === 'touch' || !state.isHovered || !target) {
         return;
       }
 
       state.isHovered = false;
-      let target = event.currentTarget;
+      removeAllGlobalListeners();
+
       if (onHoverEnd) {
         onHoverEnd({
           type: 'hoverend',
@@ -188,7 +202,7 @@ export function useHover(props: HoverProps): HoverResult {
       };
     }
     return {hoverProps, triggerHoverEnd};
-  }, [onHoverStart, onHoverChange, onHoverEnd, isDisabled, state]);
+  }, [onHoverStart, onHoverChange, onHoverEnd, isDisabled, state, addGlobalListener, removeAllGlobalListeners]);
 
   useEffect(() => {
     // Call the triggerHoverEnd as soon as isDisabled changes to true

package/src/useInteractOutside.ts

@@ -116,19 +116,25 @@ function isValidEvent(event, ref) {
   if (event.button > 0) {
     return false;
   }
-
   if (event.target) {
     // if the event target is no longer in the document, ignore
     const ownerDocument = event.target.ownerDocument;
     if (!ownerDocument || !ownerDocument.documentElement.contains(event.target)) {
       return false;
     }
-
     // If the target is within a top layer element (e.g. toasts), ignore.
     if (event.target.closest('[data-react-aria-top-layer]')) {
       return false;
     }
   }
 
-  return ref.current && !ref.current.contains(event.target);
+  if (!ref.current) {
+    return false;
+  }
+
+  // When the event source is inside a Shadow DOM, event.target is just the shadow root.
+  // Using event.composedPath instead means we can get the actual element inside the shadow root.
+  // This only works if the shadow root is open, there is no way to detect if it is closed.
+  // If the event composed path contains the ref, interaction is inside.
+  return !event.composedPath().includes(ref.current);
 }

package/src/useLongPress.ts

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes, LongPressEvent} from '@react-types/shared';
-import {mergeProps, useDescription, useGlobalListeners} from '@react-aria/utils';
+import {DOMAttributes, FocusableElement, LongPressEvent} from '@react-types/shared';
+import {focusWithoutScrolling, getOwnerDocument, mergeProps, useDescription, useGlobalListeners} from '@react-aria/utils';
 import {usePress} from './usePress';
 import {useRef} from 'react';
 
@@ -81,6 +81,12 @@ export function useLongPress(props: LongPressProps): LongPressResult {
         timeRef.current = setTimeout(() => {
           // Prevent other usePress handlers from also handling this event.
           e.target.dispatchEvent(new PointerEvent('pointercancel', {bubbles: true}));
+
+          // Ensure target is focused. On touch devices, browsers typically focus on pointer up.
+          if (getOwnerDocument(e.target).activeElement !== e.target) {
+            focusWithoutScrolling(e.target as FocusableElement);
+          }
+
           if (onLongPress) {
             onLongPress({
               ...e,