using Group for --trigger-width in ComboBox

[stefanprobst]

i guess this would be a breaking change, but what do you think about requiring a Group wrapping Input and Button in a ComboBox and using it for calculating --trigger-width? it would make adding additional elements to the trigger a bit easier, e.g.:

<Group>
  <SearchIcon /> {/* or anything else */}
  <Input />
  <Button>
    <ChevronDownIcon />
  </Button>
</Group>
<Popover>
</Popover>

diff --git i/packages/react-aria-components/src/ComboBox.tsx w/packages/react-aria-components/src/ComboBox.tsx
index 4c348f789..532e476b5 100644
--- i/packages/react-aria-components/src/ComboBox.tsx
+++ w/packages/react-aria-components/src/ComboBox.tsx
@@ -125,6 +125,7 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
     validationBehavior
   });
 
+  let groupRef = useRef<HTMLDivElement>(null);
   let buttonRef = useRef<HTMLButtonElement>(null);
   let inputRef = useRef<HTMLInputElement>(null);
   let listBoxRef = useRef<HTMLDivElement>(null);
@@ -154,17 +155,14 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
   // Make menu width match input + button
   let [menuWidth, setMenuWidth] = useState<string | null>(null);
   let onResize = useCallback(() => {
-    if (inputRef.current) {
-      let buttonRect = buttonRef.current?.getBoundingClientRect();
-      let inputRect = inputRef.current.getBoundingClientRect();
-      let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;
-      let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;
-      setMenuWidth((maxX - minX) + 'px');
+    if (groupRef.current) {
+      let groupRect = groupRef.current.getBoundingClientRect();
+      setMenuWidth((groupRect.right - groupRect.left) + 'px');
     }
-  }, [buttonRef, inputRef, setMenuWidth]);
+  }, [groupRef, setMenuWidth]);
 
   useResizeObserver({
-    ref: inputRef,
+    ref: groupRef,
     onResize: onResize
   });
 
@@ -195,7 +193,7 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
         [OverlayTriggerStateContext, state],
         [PopoverContext, {
           ref: popoverRef,
-          triggerRef: inputRef,
+          triggerRef: groupRef,
           scrollRef: listBoxRef,
           placement: 'bottom start',
           isNonModal: true,
@@ -211,7 +209,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]
       ]}>
       <div

[snowystinger]

I think it'd be a breaking change. But you can implement it in the same way we did

react-spectrum/packages/@react-spectrum/s2/src/ComboBox.tsx

Line 482 in e677260

let [triggerWidth, setTriggerWidth] = useState<string | null>(null);

I don't think we'd want ComboBox to require a Group either, we had a use case in our Spectrum implementation that didn't have a trigger button.

It's a good thought though, maybe we can make it easier in some other way. Maybe a prop for which one to use. I don't think we could decide based on the Groups presence, people are already building against how it currently works and have been for a long time.