fix: react-combobox listbox popup width matches trigger width

change/@fluentui-react-combobox-7bb9e1fd-dd15-4dd6-bdff-951b259e85db.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "fix: set popup Listbox width to trigger width",
+ "packageName": "@fluentui/react-combobox",
+ "email": "sarah.higley@microsoft.com",
+ "dependentChangeType": "patch"
+}

packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap

@@ -68,7 +68,7 @@ exports[`Combobox renders an open listbox 1`] = `
  <div
  class="fui-Listbox fui-Combobox__listbox"
  role="listbox"
- style="position: fixed; left: 0px; top: 0px; margin: 0px;"
+ style="position: fixed; left: 0px; top: 0px; margin: 0px; width: 0px;"
  >
  <div
  aria-selected="false"

packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx

@@ -49,8 +49,17 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
  excludedPropNames: ['children', 'size'],
  });
 
+ const rootRef = React.useRef<HTMLDivElement>(null);
  const triggerRef = React.useRef<HTMLInputElement>(null);
 
+ // calculate listbox width style based on trigger width
+ const [popupWidth, setPopupWidth] = React.useState<string>();
+ React.useEffect(() => {
+ const width = open ? `${rootRef.current?.clientWidth}px` : undefined;
+ setPopupWidth(width);
+ }, [open]);
+
+ // handle input type-to-select
  const getSearchString = (inputValue: string): string => {
  // if there are commas in the value string, take the text after the last comma
  const searchString = inputValue.split(',').pop();
@@ -150,7 +159,10 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
  open || hasFocus
  ? resolveShorthand(props.listbox, {
  required: true,
- defaultProps: { children: props.children },
+ defaultProps: {
+ children: props.children,
+ style: { width: popupWidth },
+ },
  })
  : undefined;
 
@@ -182,6 +194,8 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
  setOpen,
  };
 
+ state.root.ref = useMergedRefs(state.root.ref, rootRef);
+
  /* handle open/close + focus change when clicking expandIcon */
  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};
  const onExpandIconMouseDown = useEventCallback(

packages/react-components/react-combobox/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -68,7 +68,7 @@ exports[`Dropdown renders an open listbox 1`] = `
  <div
  class="fui-Listbox fui-Dropdown__listbox"
  role="listbox"
- style="position: fixed; left: 0px; top: 0px; margin: 0px;"
+ style="position: fixed; left: 0px; top: 0px; margin: 0px; width: 0px;"
  >
  <div
  aria-selected="false"

packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx

@@ -9,6 +9,7 @@ import { Listbox } from '../Listbox/Listbox';
 import type { Slot } from '@fluentui/react-utilities';
 import type { OptionValue } from '../../utils/OptionCollection.types';
 import type { DropdownProps, DropdownState } from './Dropdown.types';
+import { useMergedRefs } from '@fluentui/react-utilities';
 
 /**
  * Create the state required to render Dropdown.
@@ -29,6 +30,14 @@ export const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLBu
  excludedPropNames: ['children'],
  });
 
+ // set listbox popup width based off the root/trigger width
+ const rootRef = React.useRef<HTMLDivElement>(null);
+ const [popupWidth, setPopupWidth] = React.useState<string>();
+ React.useEffect(() => {
+ const width = open ? `${rootRef.current?.clientWidth}px` : undefined;
+ setPopupWidth(width);
+ }, [open]);
+
  // jump to matching option based on typing
  const searchString = React.useRef('');
  const [setKeyTimeout, clearKeyTimeout] = useTimeout();
@@ -108,7 +117,10 @@ export const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLBu
  baseState.open || baseState.hasFocus
  ? resolveShorthand(props.listbox, {
  required: true,
- defaultProps: { children: props.children },
+ defaultProps: {
+ children: props.children,
+ style: { width: popupWidth },
+ },
  })
  : undefined;
 
@@ -141,5 +153,7 @@ export const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLBu
  ...baseState,
  };
 
+ state.root.ref = useMergedRefs(state.root.ref, rootRef);
+
  return state;
 };