@react-aria/selection 3.25.1 → 3.27.0

package/src/useSelectableCollection.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, focusWithoutScrolling, getActiveElement, isCtrlKeyPressed, mergeProps, scrollIntoView, scrollIntoViewport, useEffectEvent, useEvent, useRouter, useUpdateLayoutEffect} from '@react-aria/utils';
+import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, focusWithoutScrolling, getActiveElement, isCtrlKeyPressed, isTabbable, mergeProps, scrollIntoView, scrollIntoViewport, useEvent, useRouter, useUpdateLayoutEffect} from '@react-aria/utils';
 import {dispatchVirtualFocus, getFocusableTreeWalker, moveVirtualFocus} from '@react-aria/focus';
 import {DOMAttributes, FocusableElement, FocusStrategy, Key, KeyboardDelegate, RefObject} from '@react-types/shared';
 import {flushSync} from 'react-dom';
@@ -312,7 +312,10 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
               }
             } while (last);
 
-            if (next && !next.contains(document.activeElement)) {
+            // If the active element is NOT tabbable but is contained by an element that IS tabbable (aka the cell), the browser will actually move focus to
+            // the containing element. We need to special case this so that tab will move focus out of the grid instead of looping between
+            // focusing the containing cell and back to the non-tabbable child element
+            if (next && (!next.contains(document.activeElement) || (document.activeElement && !isTabbable(document.activeElement)))) {
               focusWithoutScrolling(next);
             }
           }
@@ -413,49 +416,42 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     }
   });
 
-  let updateActiveDescendant = useEffectEvent(() => {
-    let keyToFocus = delegate.getFirstKey?.() ?? null;
-
-    // If no focusable items exist in the list, make sure to clear any activedescendant that may still exist and move focus back to
-    // the original active element (e.g. the autocomplete input)
-    if (keyToFocus == null) {
-      let previousActiveElement = getActiveElement();
-      moveVirtualFocus(ref.current);
-      dispatchVirtualFocus(previousActiveElement!, null);
-
-      // If there wasn't a focusable key but the collection had items, then that means we aren't in an intermediate load state and all keys are disabled.
-      // Reset shouldVirtualFocusFirst so that we don't erronously autofocus an item when the collection is filtered again.
-      if (manager.collection.size > 0) {
+  // update active descendant
+  useUpdateLayoutEffect(() => {
+    if (shouldVirtualFocusFirst.current) {
+      let keyToFocus = delegate.getFirstKey?.() ?? null;
+
+      // If no focusable items exist in the list, make sure to clear any activedescendant that may still exist and move focus back to
+      // the original active element (e.g. the autocomplete input)
+      if (keyToFocus == null) {
+        let previousActiveElement = getActiveElement();
+        moveVirtualFocus(ref.current);
+        dispatchVirtualFocus(previousActiveElement!, null);
+
+        // If there wasn't a focusable key but the collection had items, then that means we aren't in an intermediate load state and all keys are disabled.
+        // Reset shouldVirtualFocusFirst so that we don't erronously autofocus an item when the collection is filtered again.
+        if (manager.collection.size > 0) {
+          shouldVirtualFocusFirst.current = false;
+        }
+      } else {
+        manager.setFocusedKey(keyToFocus);
+        // Only set shouldVirtualFocusFirst to false if we've successfully set the first key as the focused key
+        // If there wasn't a key to focus, we might be in a temporary loading state so we'll want to still focus the first key
+        // after the collection updates after load
         shouldVirtualFocusFirst.current = false;
       }
-    } else {
-      manager.setFocusedKey(keyToFocus);
-      // Only set shouldVirtualFocusFirst to false if we've successfully set the first key as the focused key
-      // If there wasn't a key to focus, we might be in a temporary loading state so we'll want to still focus the first key
-      // after the collection updates after load
-      shouldVirtualFocusFirst.current = false;
     }
-  });
+  }, [manager.collection]);
 
+  // reset focus first flag
   useUpdateLayoutEffect(() => {
-    if (shouldVirtualFocusFirst.current) {
-      updateActiveDescendant();
-    }
-
-  }, [manager.collection, updateActiveDescendant]);
-
-  let resetFocusFirstFlag = useEffectEvent(() => {
     // If user causes the focused key to change in any other way, clear shouldVirtualFocusFirst so we don't
     // accidentally move focus from under them. Skip this if the collection was empty because we might be in a load
     // state and will still want to focus the first item after load
     if (manager.collection.size > 0) {
       shouldVirtualFocusFirst.current = false;
     }
-  });
-
-  useUpdateLayoutEffect(() => {
-    resetFocusFirstFlag();
-  }, [manager.focusedKey, resetFocusFirstFlag]);
+  }, [manager.focusedKey]);
 
   useEvent(ref, CLEAR_FOCUS_EVENT, !shouldUseVirtualFocus ? undefined : (e: any) => {
     e.stopPropagation();

package/src/useSelectableItem.ts

@@ -205,8 +205,9 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   // With highlight selection, onAction is secondary, and occurs on double click. Single click selects the row.
   // With touch, onAction occurs on single tap, and long press enters selection mode.
   let isLinkOverride = manager.isLink(key) && linkBehavior === 'override';
+  let isActionOverride = onAction && options['UNSTABLE_itemBehavior'] === 'action';
   let hasLinkAction = manager.isLink(key) && linkBehavior !== 'selection' && linkBehavior !== 'none';
-  let allowsSelection = !isDisabled && manager.canSelectItem(key) && !isLinkOverride;
+  let allowsSelection = !isDisabled && manager.canSelectItem(key) && !isLinkOverride && !isActionOverride;
   let allowsActions = (onAction || hasLinkAction) && !isDisabled;
   let hasPrimaryAction = allowsActions && (
     manager.selectionBehavior === 'replace'
@@ -225,6 +226,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   let performAction = (e) => {
     if (onAction) {
       onAction();
+      ref.current?.dispatchEvent(new CustomEvent('react-aria-item-action', {bubbles: true}));
     }
 
     if (hasLinkAction && ref.current) {