diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index d58621974b1..b05771b8d73 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -45,7 +45,7 @@ import ChevronIcon from '../ui-icons/Chevron';
 import {Collection} from 'react-aria/Collection';
 import {ContextValue, Provider} from 'react-aria-components/slots';
 import {control, controlBorderRadius, controlFont, controlSize, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {createFocusableRef} from './useDOMRef';
 import {createLeafComponent} from 'react-aria/CollectionBuilder';
 import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};
@@ -55,17 +55,16 @@ import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon';
 import {InputContext, InputProps} from 'react-aria-components/Input';
+// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ListLayout} from 'react-stately/useVirtualizerState';
 import {mergeRefs} from 'react-aria/mergeRefs';
-// @ts-ignore
 import {Node} from '@react-types/shared';
 import {Popover} from './Popover';
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
 import {TextFieldRef} from './TextField';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
-import {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';
 import {useScale} from './utils';
 import {useSlotId} from 'react-aria/private/utils/useId';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -500,23 +499,6 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
     menuOffset = 8;
   }
 
-  let triggerRef = useRef<HTMLDivElement>(null);
-  // Make menu width match input + button
-  let [triggerWidth, setTriggerWidth] = useState<string | null>(null);
-  let onResize = useCallback(() => {
-    if (triggerRef.current) {
-      let inputRect = triggerRef.current.getBoundingClientRect();
-      let minX = inputRect.left;
-      let maxX = inputRect.right;
-      setTriggerWidth((maxX - minX) + 'px');
-    }
-  }, [triggerRef, setTriggerWidth]);
-
-  useResizeObserver({
-    ref: triggerRef,
-    onResize: onResize
-  });
-
   let state = useContext(ComboBoxStateContext);
   let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
   let [showLoading, setShowLoading] = useState(false);
@@ -614,7 +596,6 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
           {label}
         </FieldLabel>
         <FieldGroup
-          ref={triggerRef}
           role="presentation"
           isDisabled={isDisabled}
           isInvalid={isInvalid}
@@ -667,12 +648,11 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
         </HelpText>
         <Popover
           hideArrow
-          triggerRef={triggerRef}
           offset={menuOffset}
           placement={`${direction} ${align}` as Placement}
           shouldFlip={shouldFlip}
           UNSAFE_style={{
-            '--trigger-width': (menuWidth ? menuWidth + 'px' : triggerWidth)
+            '--trigger-width': (menuWidth ? menuWidth + 'px' : undefined)
           } as CSSProperties}
           padding="none"
           styles={style({
diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx
index e0549f23514..78e98c2ebe2 100644
--- a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx
@@ -445,11 +445,13 @@ import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
 
 <Anatomy />
 
-```tsx links={{ComboBox: '#combobox', ComboBoxValue: '#comboboxvalue', Button: 'Button', Popover: 'Popover', ListBox: 'ListBox'}}
+```tsx links={{ComboBox: '#combobox', ComboBoxValue: '#comboboxvalue', Group: 'Group', Button: 'Button', Popover: 'Popover', ListBox: 'ListBox'}}
 <ComboBox>
   <Label />
-  <Input />
-  <Button />
+  <Group>
+    <Input />
+    <Button />
+  </Group>
   <ComboBoxValue />
   <Text slot="description" />
   <FieldError />
diff --git a/packages/react-aria-components/src/ComboBox.tsx b/packages/react-aria-components/src/ComboBox.tsx
index d6ef3c99a87..f75cd8d5642 100644
--- a/packages/react-aria-components/src/ComboBox.tsx
+++ b/packages/react-aria-components/src/ComboBox.tsx
@@ -159,6 +159,7 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
 
   let buttonRef = useRef<HTMLButtonElement>(null);
   let inputRef = useRef<HTMLInputElement>(null);
+  let groupRef = useRef<HTMLDivElement>(null);
   let listBoxRef = useRef<HTMLDivElement>(null);
   let popoverRef = useRef<HTMLDivElement>(null);
   let [labelRef, label] = useSlot(
@@ -185,9 +186,10 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
   }, state);
 
   // Make menu width match input + button
+  // Left for backward compatibility in case a <Group> is not rendered.
   let [menuWidth, setMenuWidth] = useState<string | null>(null);
   let onResize = useCallback(() => {
-    if (inputRef.current) {
+    if (inputRef.current && !groupRef.current) {
       let buttonRect = buttonRef.current?.getBoundingClientRect();
       let inputRect = inputRef.current.getBoundingClientRect();
       let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;
@@ -201,6 +203,13 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
     onResize: onResize
   });
 
+  // Position popover relative to group if available, otherwise input.
+  let triggerRef = useMemo(() => ({
+    get current() {
+      return groupRef.current || inputRef.current;
+    }
+  }), [groupRef, inputRef]);
+
   // Only expose a subset of state to renderProps function to avoid infinite render loop
   let renderPropsState = useMemo(() => ({
     isOpen: state.isOpen,
@@ -241,7 +250,7 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
         [OverlayTriggerStateContext, state],
         [PopoverContext, {
           ref: popoverRef,
-          triggerRef: inputRef,
+          triggerRef,
           scrollRef: listBoxRef,
           placement: 'bottom start',
           isNonModal: true,
@@ -257,7 +266,7 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
             errorMessage: errorMessageProps
           }
         }],
-        [GroupContext, {isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],
+        [GroupContext, {ref: groupRef, isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],
         [FieldErrorContext, validation],
         [ComboBoxValueContext, valueProps]
       ]}>
diff --git a/packages/react-aria-components/src/DatePicker.tsx b/packages/react-aria-components/src/DatePicker.tsx
index 71bbd55f79e..8c4f8b5c02a 100644
--- a/packages/react-aria-components/src/DatePicker.tsx
+++ b/packages/react-aria-components/src/DatePicker.tsx
@@ -40,10 +40,9 @@ import {HiddenDateInput} from './HiddenDateInput';
 import {LabelContext} from './Label';
 import {mergeProps} from 'react-aria/mergeProps';
 import {PopoverContext} from './Popover';
-import React, {createContext, ForwardedRef, forwardRef, useCallback, useRef, useState} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
 import {TextContext} from './Text';
 import {useFocusRing} from 'react-aria/useFocusRing';
-import {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';
 
 export interface DatePickerRenderProps {
   /**
@@ -148,19 +147,6 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     validationBehavior
   }, state, groupRef);
 
-  // Allows calendar width to match input group
-  let [groupWidth, setGroupWidth] = useState<string | null>(null);
-  let onResize = useCallback(() => {
-    if (groupRef.current) {
-      setGroupWidth(groupRef.current.offsetWidth + 'px');
-    }
-  }, []);
-
-  useResizeObserver({
-    ref: groupRef,
-    onResize: onResize
-  });
-
   let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});
   let renderProps = useRenderProps({
     ...props,
@@ -194,7 +180,6 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
           trigger: 'DatePicker',
           triggerRef: groupRef,
           placement: 'bottom start',
-          style: {'--trigger-width': groupWidth} as React.CSSProperties,
           clearContexts: CLEAR_CONTEXTS
         }],
         [DialogContext, dialogProps],
@@ -260,19 +245,6 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
     validationBehavior
   }, state, groupRef);
 
-  // Allows calendar width to match input group
-  let [groupWidth, setGroupWidth] = useState<string | null>(null);
-  let onResize = useCallback(() => {
-    if (groupRef.current) {
-      setGroupWidth(groupRef.current.offsetWidth + 'px');
-    }
-  }, []);
-
-  useResizeObserver({
-    ref: groupRef,
-    onResize: onResize
-  });
-
   let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});
   let renderProps = useRenderProps({
     ...props,
@@ -305,7 +277,6 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
           trigger: 'DateRangePicker',
           triggerRef: groupRef,
           placement: 'bottom start',
-          style: {'--trigger-width': groupWidth} as React.CSSProperties,
           clearContexts: CLEAR_CONTEXTS
         }],
         [DialogContext, dialogProps],
diff --git a/packages/react-aria-components/src/Dialog.tsx b/packages/react-aria-components/src/Dialog.tsx
index d3d2a8b4fcc..5b4ee7d2969 100644
--- a/packages/react-aria-components/src/Dialog.tsx
+++ b/packages/react-aria-components/src/Dialog.tsx
@@ -20,12 +20,11 @@ import {mergeProps} from 'react-aria/mergeProps';
 import {OverlayTriggerProps, OverlayTriggerState} from 'react-stately/useOverlayTriggerState';
 import {PopoverContext} from './Popover';
 import {PressResponder} from 'react-aria/private/interactions/PressResponder';
-import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useCallback, useContext, useRef, useState} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useRef} from 'react';
 import {RootMenuTriggerStateContext} from './Menu';
 import {useId} from 'react-aria/useId';
 import {useMenuTriggerState} from 'react-stately/useMenuTriggerState';
 import {useOverlayTrigger} from 'react-aria/useOverlayTrigger';
-import {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';
 
 export interface DialogTriggerProps extends OverlayTriggerProps {
   children: ReactNode
@@ -59,19 +58,6 @@ export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
   let buttonRef = useRef<HTMLButtonElement>(null);
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, buttonRef);
 
-  // Allows popover width to match trigger element
-  let [buttonWidth, setButtonWidth] = useState<string | null>(null);
-  let onResize = useCallback(() => {
-    if (buttonRef.current) {
-      setButtonWidth(buttonRef.current.offsetWidth + 'px');
-    }
-  }, [buttonRef]);
-
-  useResizeObserver({
-    ref: buttonRef,
-    onResize: onResize
-  });
-
   // Label dialog by the trigger as a fallback if there is no title slot.
   // This is done in RAC instead of hooks because otherwise we cannot distinguish
   // between context and props. Normally aria-labelledby overrides the title
@@ -88,8 +74,7 @@ export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
         [PopoverContext, {
           trigger: 'DialogTrigger',
           triggerRef: buttonRef,
-          'aria-labelledby': overlayProps['aria-labelledby'],
-          style: {'--trigger-width': buttonWidth} as React.CSSProperties
+          'aria-labelledby': overlayProps['aria-labelledby']
         }]
       ]}>
       <PressResponder {...triggerProps} ref={buttonRef} isPressed={state.isOpen}>
diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx
index 452d8126076..3a7024adbab 100644
--- a/packages/react-aria-components/src/Menu.tsx
+++ b/packages/react-aria-components/src/Menu.tsx
@@ -18,7 +18,6 @@ import {
   useMenuTrigger,
   useSubmenuTrigger
 } from 'react-aria/useMenu';
-
 import {BaseCollection, CollectionNode, ItemNode, SectionNode} from 'react-aria/private/collections/BaseCollection';
 import {
   MenuTriggerProps as BaseMenuTriggerProps,
@@ -45,9 +44,7 @@ import {
 import {Collection} from 'react-aria/Collection';
 import {CollectionBuilder, createBranchComponent, createLeafComponent} from 'react-aria/CollectionBuilder';
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps, usePersistedKeys} from './Collection';
-
 import {FieldInputContext, SelectableCollectionContext, SelectableCollectionContextValue} from './Autocomplete';
-
 import {filterDOMProps} from 'react-aria/filterDOMProps';
 import {FocusEvents, FocusStrategy, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, MultipleSelection, PressEvents} from '@react-types/shared';
 import {FocusScope} from 'react-aria/FocusScope';
@@ -67,11 +64,9 @@ import React, {
   ReactElement,
   ReactNode,
   RefObject,
-  useCallback,
   useContext,
   useMemo,
-  useRef,
-  useState
+  useRef
 } from 'react';
 import {SelectionIndicatorContext} from './SelectionIndicator';
 import {SelectionManager} from 'react-stately/private/selection/SelectionManager';
@@ -82,7 +77,6 @@ import {TreeState, useTreeState} from 'react-stately/useTreeState';
 import {useHover} from 'react-aria/useHover';
 import {useMultipleSelectionState} from 'react-stately/useMultipleSelectionState';
 import {useObjectRef} from 'react-aria/useObjectRef';
-import {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';
 
 export const MenuContext = createContext<ContextValue<MenuProps<any>, HTMLDivElement>>(null);
 export const MenuStateContext = createContext<TreeState<any> | null>(null);
@@ -100,18 +94,6 @@ export function MenuTrigger(props: MenuTriggerProps): JSX.Element {
     ...props,
     type: 'menu'
   }, state, ref);
-  // Allows menu width to match button
-  let [buttonWidth, setButtonWidth] = useState<string | null>(null);
-  let onResize = useCallback(() => {
-    if (ref.current) {
-      setButtonWidth(ref.current.offsetWidth + 'px');
-    }
-  }, [ref]);
-
-  useResizeObserver({
-    ref: ref,
-    onResize: onResize
-  });
   let scrollRef = useRef(null);
 
   return (
@@ -125,7 +107,6 @@ export function MenuTrigger(props: MenuTriggerProps): JSX.Element {
           triggerRef: ref,
           scrollRef,
           placement: 'bottom start',
-          style: {'--trigger-width': buttonWidth} as React.CSSProperties,
           'aria-labelledby': menuProps['aria-labelledby']
         }]
       ]}>
diff --git a/packages/react-aria-components/src/Popover.tsx b/packages/react-aria-components/src/Popover.tsx
index 4df2320e97a..1051ad124a6 100644
--- a/packages/react-aria-components/src/Popover.tsx
+++ b/packages/react-aria-components/src/Popover.tsx
@@ -31,11 +31,12 @@ import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately/useOverlayTriggerState';
 import {OverlayTriggerStateContext} from './Dialog';
 import {PlacementAxis, PositionProps} from 'react-aria/useOverlayPosition';
-import React, {Context, createContext, ForwardedRef, forwardRef, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';
 import {useIsHidden} from 'react-aria/private/collections/Hidden';
 import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';
 import {useLocale} from 'react-aria/I18nProvider';
+import {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';
 
 export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps, AriaLabelingProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
@@ -222,10 +223,24 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, clearContexts
     return children;
   }, [renderProps.children, clearContexts]);
 
+  let [triggerWidth, setTriggerWidth] = useState<string | null>(null);
+  let onResize = useCallback(() => {
+    if (props.triggerRef.current) {
+      setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');
+    }
+  }, [props.triggerRef]);
+
+  useLayoutEffect(onResize, [onResize]);
+  useResizeObserver({
+    ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,
+    onResize: onResize
+  });
+
   let style = {
     ...popoverProps.style,
     '--trigger-anchor-point': triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : undefined,
-    ...renderProps.style
+    ...renderProps.style,
+    '--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth
   };
 
   let overlay = (
diff --git a/packages/react-aria-components/src/Select.tsx b/packages/react-aria-components/src/Select.tsx
index d877cb7fd34..ae7aef002c5 100644
--- a/packages/react-aria-components/src/Select.tsx
+++ b/packages/react-aria-components/src/Select.tsx
@@ -34,21 +34,20 @@ import {FieldErrorContext} from './FieldError';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
 import {FormContext} from './Form';
 import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
+// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ItemRenderProps} from './Collection';
 import {LabelContext} from './Label';
 import {ListBoxContext, ListStateContext} from './ListBox';
 import {mergeProps} from 'react-aria/mergeProps';
 import {OverlayTriggerStateContext} from './Dialog';
-// @ts-ignore
 import {PopoverContext} from './Popover';
-import React, {createContext, ForwardedRef, forwardRef, Fragment, HTMLAttributes, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, Fragment, HTMLAttributes, ReactNode, useContext, useMemo, useRef} from 'react';
 import {SelectState, useSelectState} from 'react-stately/useSelectState';
 import {TextContext} from './Text';
 import {useFocusRing} from 'react-aria/useFocusRing';
 import {useListFormatter} from 'react-aria/useListFormatter';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
-import {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';
 
 type SelectionMode = 'single' | 'multiple';
 
@@ -169,19 +168,6 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
     validationBehavior
   }, state, buttonRef);
 
-  // Make menu width match input + button
-  let [buttonWidth, setButtonWidth] = useState<string | null>(null);
-  let onResize = useCallback(() => {
-    if (buttonRef.current) {
-      setButtonWidth(buttonRef.current.offsetWidth + 'px');
-    }
-  }, [buttonRef]);
-
-  useResizeObserver({
-    ref: buttonRef,
-    onResize: onResize
-  });
-
   // Only expose a subset of state to renderProps function to avoid infinite render loop
   let renderPropsState = useMemo(() => ({
     isOpen: state.isOpen,
@@ -217,7 +203,6 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
           triggerRef: buttonRef,
           scrollRef,
           placement: 'bottom start',
-          style: {'--trigger-width': buttonWidth} as React.CSSProperties,
           'aria-labelledby': menuProps['aria-labelledby'],
           clearContexts: CLEAR_CONTEXTS
         }],
diff --git a/packages/react-aria-components/stories/ComboBox.stories.tsx b/packages/react-aria-components/stories/ComboBox.stories.tsx
index 95e5c268950..6518535670c 100644
--- a/packages/react-aria-components/stories/ComboBox.stories.tsx
+++ b/packages/react-aria-components/stories/ComboBox.stories.tsx
@@ -14,6 +14,8 @@ import {Button} from '../src/Button';
 
 import {Collection} from 'react-aria/Collection';
 import {ComboBox, ComboBoxProps, ComboBoxStateContext} from '../src/ComboBox';
+import {Dialog, DialogTrigger} from '../src/Dialog';
+import {Group} from '../src/Group';
 import {Input} from '../src/Input';
 import {Label} from '../src/Label';
 import {ListBox} from '../src/ListBox';
@@ -21,6 +23,7 @@ import {ListBoxLoadMoreItem} from '../src/ListBox';
 import {ListLayout} from 'react-stately/useVirtualizerState';
 import {LoadingSpinner, MyListBoxItem} from './utils';
 import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import {Modal, ModalOverlay} from '../src/Modal';
 import {Popover} from '../src/Popover';
 import React, {JSX, useMemo, useState} from 'react';
 import styles from '../example/index.css';
@@ -47,11 +50,12 @@ export const ComboBoxExample: ComboBoxStory = () => (
         <span aria-hidden="true" style={{padding: '0 2px'}}>▼</span>
       </Button>
     </div>
-    <Popover placement="bottom end">
+    <Popover>
       <ListBox
         renderEmptyState={renderEmptyState}
         data-testid="combo-box-list-box"
-        className={styles.menu}>
+        className={styles.menu}
+        style={{width: 'var(--trigger-width)'}}>
         <MyListBoxItem>Foo</MyListBoxItem>
         <MyListBoxItem>Bar</MyListBoxItem>
         <MyListBoxItem>Baz</MyListBoxItem>
@@ -404,33 +408,33 @@ export const ComboBoxListBoxItemWithAriaLabel: ComboBoxStory = () => (
 export const MultiSelectComboBox: ComboBoxStory = () => (
   <ComboBox allowsEmptyCollection selectionMode="multiple" defaultItems={usStateOptions}>
     <Label style={{display: 'block'}}>Test</Label>
-    <div style={{display: 'flex'}}>
-      <Input placeholder="Select an item" />
+    <Group style={{display: 'flex', width: 300, flexWrap: 'wrap', border: '1px solid gray'}}>
+      <ComboBoxStateContext.Consumer>
+        {state => state && (
+          <TagGroup
+            aria-label="Selected states"
+            items={state.selectedItems.map(item => item.value)}
+            onRemove={(keys) => {
+              // Remove keys from ComboBox state.
+              if (Array.isArray(state.value)) {
+                state.setValue(state.value.filter(k => !keys.has(k)));
+              }
+            }}>
+            {item => <Tag>{item.name}</Tag>}
+          </TagGroup>
+        )}
+      </ComboBoxStateContext.Consumer>
+      <Input placeholder="Select an item" style={{border: 'none', width: 80, flex: 1}} />
       <Button>
         <span aria-hidden="true" style={{padding: '0 2px'}}>▼</span>
       </Button>
-    </div>
-    <ComboBoxStateContext.Consumer>
-      {state => state && (
-        <TagGroup
-          aria-label="Selected states"
-          items={state.selectedItems.map(item => item.value)}
-          renderEmptyState={() => 'No selected items'}
-          onRemove={(keys) => {
-            // Remove keys from ComboBox state.
-            if (Array.isArray(state.value)) {
-              state.setValue(state.value.filter(k => !keys.has(k)));
-            }
-          }}>
-          {item => <Tag>{item.name}</Tag>}
-        </TagGroup>
-      )}
-    </ComboBoxStateContext.Consumer>
-    <Popover placement="bottom end">
+    </Group>
+    <Popover>
       <ListBox<{name: string}>
         renderEmptyState={renderEmptyState}
         data-testid="combo-box-list-box"
-        className={styles.menu}>
+        className={styles.menu}
+        style={{width: 'var(--trigger-width)'}}>
         {item => <MyListBoxItem>{item.name}</MyListBoxItem>}
       </ListBox>
     </Popover>
@@ -498,3 +502,58 @@ const usStateOptions = [
   {id: 'WI', name: 'Wisconsin'},
   {id: 'WY', name: 'Wyoming'}
 ];
+
+export const InModal: ComboBoxStory = () => (
+  <DialogTrigger>
+    <Button>Open modal</Button>
+    <ModalOverlay
+      style={{
+        position: 'fixed',
+        zIndex: 100,
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        background: 'rgba(0, 0, 0, 0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}>
+      <Modal
+        style={({isEntering}) => ({
+          background: 'Canvas',
+          color: 'CanvasText',
+          border: '1px solid gray',
+          padding: 30,
+          transform: isEntering ? 'scale(0.8)' : 'scale(1)',
+          transition: 'transform 400ms'
+        })}>
+        <Dialog>
+          <ComboBox name="combo-box-example" data-testid="combo-box-example" allowsEmptyCollection>
+            <Label style={{display: 'block'}}>Test</Label>
+            <Group style={{display: 'flex'}}>
+              <Input />
+              <Button>
+                <span aria-hidden="true" style={{padding: '0 2px'}}>▼</span>
+              </Button>
+            </Group>
+            <Popover>
+              <ListBox
+                renderEmptyState={renderEmptyState}
+                data-testid="combo-box-list-box"
+                className={styles.menu}
+                style={{width: 'var(--trigger-width)'}}>
+                <MyListBoxItem>Foo</MyListBoxItem>
+                <MyListBoxItem>Bar</MyListBoxItem>
+                <MyListBoxItem>Baz</MyListBoxItem>
+                <MyListBoxItem href="http://google.com">Google</MyListBoxItem>
+                <MyListBoxLoaderIndicator />
+              </ListBox>
+            </Popover>
+          </ComboBox>
+          <Button slot="close">Close</Button>
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  </DialogTrigger>
+);
diff --git a/packages/react-aria-components/stories/ComboBoxReproductions.stories.tsx b/packages/react-aria-components/stories/ComboBoxReproductions.stories.tsx
deleted file mode 100644
index 373e74ba207..00000000000
--- a/packages/react-aria-components/stories/ComboBoxReproductions.stories.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * Copyright 2022 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 {Button} from '../src/Button';
-
-import {ComboBox} from '../src/ComboBox';
-import {Input} from '../src/Input';
-import {Label} from '../src/Label';
-import {ListBox, ListBoxItem} from '../src/ListBox';
-import {Meta, StoryFn} from '@storybook/react';
-import {Popover} from '../src/Popover';
-import React from 'react';
-import './combobox-reproductions.css';
-import './styles.css';
-
-
-export default {
-  title: 'React Aria Components/ComboBoxReproductions',
-  component: ComboBox
-} as Meta<typeof ComboBox>;
-
-export type ComboBoxReproductionStory = StoryFn<typeof ComboBox>;
-
-export const ComboBoxReproductionExample: ComboBoxReproductionStory = () => (
-  <ComboBox>
-    <Label>Favorite Animal</Label>
-    <div>
-      <Input />
-      <Button>▼</Button>
-    </div>
-    <Popover>
-      <ListBox>
-        <ListBoxItem>Aardvark</ListBoxItem>
-        <ListBoxItem>Cat</ListBoxItem>
-        <ListBoxItem>Dooooooooooooooooooooooooooooooooog</ListBoxItem>
-        <ListBoxItem>Kangaroo</ListBoxItem>
-        <ListBoxItem>Panda</ListBoxItem>
-        <ListBoxItem>Snake</ListBoxItem>
-      </ListBox>
-    </Popover>
-  </ComboBox>
-);
diff --git a/packages/react-aria-components/stories/Select.stories.tsx b/packages/react-aria-components/stories/Select.stories.tsx
index 3fe61ef466d..0b6d42299c3 100644
--- a/packages/react-aria-components/stories/Select.stories.tsx
+++ b/packages/react-aria-components/stories/Select.stories.tsx
@@ -57,11 +57,8 @@ export const SelectExample: SelectStory = (args) => (
       <SelectValue />
       <span aria-hidden="true" style={{paddingLeft: 5}}>▼</span>
     </Button>
-    <Popover>
-      <OverlayArrow>
-        <svg width={12} height={12}><path d="M0 0,L6 6,L12 0" /></svg>
-      </OverlayArrow>
-      <ListBox className={styles.menu}>
+    <Popover style={{width: 'var(--trigger-width)', boxSizing: 'border-box'}}>
+      <ListBox className={styles.menu} style={{minWidth: 0, width: '100%'}}>
         <MyListBoxItem>Foo</MyListBoxItem>
         <MyListBoxItem>Bar</MyListBoxItem>
         <MyListBoxItem>Baz</MyListBoxItem>
diff --git a/packages/react-aria-components/stories/combobox-reproductions.css b/packages/react-aria-components/stories/combobox-reproductions.css
deleted file mode 100644
index 12e523ccc06..00000000000
--- a/packages/react-aria-components/stories/combobox-reproductions.css
+++ /dev/null
@@ -1,94 +0,0 @@
-html,
-body,
-#root {
-  padding: 0;
-  margin: 0;
-  height: 100%;
-}
-
-@import "@react-aria/example-theme";
-
-:global(.react-aria-ComboBox) {
-  color: var(--text-color);
-
-  :global(.react-aria-Input) {
-    margin: 0;
-    font-size: 1.072rem;
-    background: var(--field-background);
-    color: var(--field-text-color);
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    padding: 0.286rem 2rem 0.286rem 0.571rem;
-    vertical-align: middle;
-
-    &[data-focused] {
-      outline: none;
-      outline: 2px solid var(--focus-ring-color);
-      outline-offset: -1px;
-    }
-  }
-
-  :global(.react-aria-Button) {
-    background: var(--highlight-background);
-    color: var(--highlight-foreground);
-    forced-color-adjust: none;
-    border-radius: 4px;
-    border: none;
-    margin-left: -1.714rem;
-    width: 1.429rem;
-    height: 1.429rem;
-    padding: 0;
-    font-size: 0.857rem;
-    cursor: default;
-
-    &[data-pressed] {
-      box-shadow: none;
-      background: var(--highlight-background);
-    }
-  }
-}
-
-:global(.react-aria-Popover)[data-trigger="ComboBox"] {
-  width: var(--trigger-width);
-
-  :global(.react-aria-ListBox) {
-    display: block;
-    width: unset;
-    max-height: inherit;
-    min-height: unset;
-    border: none;
-
-    :global(.react-aria-Header) {
-      padding-left: 1.571rem;
-    }
-  }
-
-  :global(.react-aria-ListBoxItem) {
-    padding: 0.286rem 0.571rem 0.286rem 1.571rem;
-
-    &[data-focus-visible] {
-      outline: none;
-    }
-
-    &[data-selected] {
-      font-weight: 600;
-      background: unset;
-      color: var(--text-color);
-
-      &::before {
-        content: "✓";
-        content: "✓" / "";
-        alt: " ";
-        position: absolute;
-        top: 4px;
-        left: 4px;
-      }
-    }
-
-    &[data-focused],
-    &[data-pressed] {
-      background: var(--highlight-background);
-      color: var(--highlight-foreground);
-    }
-  }
-}