Fix SearchWithin menu measurements (#2170)

* Fix SearchWithin menu measurements

* fix lint

* Depend on min-width which is in another PR

* fix lint

* fix last of lint

* use a ref on the group element

* simplify logic

* Fixing ref usage

* fix case where resize doesn't trigger

* use @daniel's simpler syntax

Co-authored-by: Daniel Lu <[email protected]>

Author: snowystinger

packages/@react-spectrum/searchwithin/src/SearchWithin.tsx

@@ -34,19 +34,21 @@ function SearchWithin(props: SpectrumSearchWithinProps, ref: FocusableRef<HTMLEl
     'aria-labelledby': ariaLabelledby
   } = props;
 
-  let inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>();
-  let domRef = useFocusableRef(ref, inputRef);
+  let domRef = useFocusableRef(ref);
+  let groupRef = useRef<HTMLDivElement>();
 
   // Measure the width of the field to inform the width of the menu.
   let [menuWidth, setMenuWidth] = useState(null);
   let {scale} = useProvider();
 
   let onResize = useCallback(() => {
-    if (domRef.current) {
-      let width = domRef.current.offsetWidth;
+    let shouldUseGroup = !!label;
+    let width = shouldUseGroup ? groupRef.current?.offsetWidth : domRef.current?.offsetWidth;
+
+    if (!isNaN(width)) {
       setMenuWidth(width);
     }
-  }, [domRef]);
+  }, [groupRef, domRef, setMenuWidth, label]);
 
   useResizeObserver({
     ref: domRef,
@@ -75,7 +77,8 @@ function SearchWithin(props: SpectrumSearchWithinProps, ref: FocusableRef<HTMLEl
       <div
         role="group"
         aria-labelledby={labelProps.id || ariaLabel}
-        className={classNames(styles, 'spectrum-SearchWithin', styleProps.className)}>
+        className={classNames(styles, 'spectrum-SearchWithin', styleProps.className)}
+        ref={groupRef}>
         <SlotProvider slots={slots}>
           {children}
         </SlotProvider>

packages/@react-spectrum/searchwithin/stories/SearchWithin.stories.tsx

@@ -10,8 +10,10 @@
  * governing permissions and limitations under the License.
  */
 import {action} from '@storybook/addon-actions';
+import {ActionButton} from '@react-spectrum/button';
+import {Flex} from '@react-spectrum/layout';
 import {Item, Picker} from '@react-spectrum/picker';
-import React from 'react';
+import React, {useState} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import {SearchFieldProps} from '@react-types/searchfield';
 import {SearchWithin} from '../';
@@ -45,11 +47,32 @@ function renderReverse(props: Omit<SpectrumSearchWithinProps, 'children'> = {},
         <Item key="audiences">Audiences</Item>
         <Item key="tags">Tags</Item>
       </Picker>
-      <SearchField placeholder="Search" {...searchFieldProps} {...searchFieldProps} onChange={action('change')} onSubmit={action('submit')} />
+      <SearchField placeholder="Search" {...searchFieldProps} onChange={action('change')} onSubmit={action('submit')} />
     </SearchWithin>
   );
 }
 
+function ResizeSearchWithinApp(props) {
+  const [state, setState] = useState(true);
+
+  return (
+    <Flex direction="column" gap="size-200" alignItems="start">
+      <div style={{width: state ? '300px' : '400px'}}>
+        <SearchWithin label="Search" {...props} width="100%">
+          <SearchField placeholder="Search" onChange={action('change')} onSubmit={action('submit')} />
+          <Picker defaultSelectedKey="all" onSelectionChange={action('selectionChange')}>
+            <Item key="all">All</Item>
+            <Item key="campaigns">Campaigns</Item>
+            <Item key="audiences">Audiences</Item>
+            <Item key="tags">Tags</Item>
+          </Picker>
+        </SearchWithin>
+      </div>
+      <ActionButton onPress={() => setState(!state)}>Toggle size</ActionButton>
+    </Flex>
+  );
+}
+
 export const Default = () => render({});
 
 export const ValueControlled = () => render({}, {value: 'Controlled'});
@@ -96,3 +119,7 @@ export const AutoFocusPicker = () => render({}, {}, {autoFocus: true});
 AutoFocusPicker.storyName = 'autoFocus: true on Picker';
 
 export const ReverseChildrenOrder = () => renderReverse({});
+
+export const ResizeSearchWithin = () => <ResizeSearchWithinApp />;
+
+export const ResizeSearchWithinNoLabel = () => <ResizeSearchWithinApp label={null} />;