chore: additional shadow dom tests

packages/@react-aria/combobox/package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@react-aria/focus": "^3.21.4",
     "@react-aria/i18n": "^3.12.15",
+    "@react-aria/interactions": "^3.27.0",
     "@react-aria/listbox": "^3.15.2",
     "@react-aria/live-announcer": "^3.4.4",
     "@react-aria/menu": "^3.20.0",

packages/@react-aria/combobox/src/useComboBox.ts

@@ -25,6 +25,7 @@ import {getChildNodes, getItemCount} from '@react-stately/collections';
 import intlMessages from '../intl/*.json';
 import {ListKeyboardDelegate, useSelectableCollection} from '@react-aria/selection';
 import {privateValidationStateProp} from '@react-stately/form';
+import {useInteractOutside} from '@react-aria/interactions';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useMenuTrigger} from '@react-aria/menu';
 import {useTextField} from '@react-aria/textfield';
@@ -182,8 +183,9 @@ export function useComboBox<T, M extends SelectionMode = 'single'>(props: AriaCo
   };
 
   let onBlur = (e: FocusEvent<HTMLInputElement>) => {
-    let blurFromButton = buttonRef?.current && buttonRef.current === e.relatedTarget;
+    let blurFromButton = nodeContains(buttonRef.current, e.relatedTarget as Element);
     let blurIntoPopover = nodeContains(popoverRef.current, e.relatedTarget);
+
     // Ignore blur if focused moved to the button(if exists) or into the popover.
     if (blurFromButton || blurIntoPopover) {
       return;
@@ -225,7 +227,7 @@ export function useComboBox<T, M extends SelectionMode = 'single'>(props: AriaCo
   }, inputRef);
 
   useFormReset(inputRef, state.defaultValue, state.setValue);
-  
+
   // Press handlers for the ComboBox button
   let onPress = (e: PressEvent) => {
     if (e.pointerType === 'touch') {
@@ -365,6 +367,19 @@ export function useComboBox<T, M extends SelectionMode = 'single'>(props: AriaCo
     state.close();
   } : undefined);
 
+  // usePopover -> useOverlay calls useInteractOutside, but ComboBox is non-modal, so `isDismissable` is false
+  // Because of this, onInteractOutside is not passed to useInteractOutside, so we need to call it here.
+  useInteractOutside({
+    ref: popoverRef,
+    onInteractOutside: (e) => {
+      if (nodeContains(buttonRef?.current, getEventTarget(e) as Element)) {
+        return;
+      }
+      state.close();
+    },
+    isDisabled: !state.isOpen
+  });
+
   return {
     labelProps,
     buttonProps: {