From c4765b48953ac9be7f964d9ccf573c545dd5de5a Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Thu, 8 Sep 2022 16:19:37 -0700
Subject: [PATCH 1/3] set listbox popup width to trigger width

---
 .../react-combobox/src/utils/useTriggerListboxSlots.ts    | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts b/packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts
index c90f3f1e02fa2..bb535f187e950 100644
--- a/packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts
+++ b/packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts
@@ -52,9 +52,17 @@ export function useTriggerListboxSlots(
   // handle trigger focus/blur
   const triggerRef: typeof ref = React.useRef(null);
 
+  // calculate listbox width style based on trigger width
+  const [popupWidth, setPopupWidth] = React.useState<number>();
+  React.useEffect(() => {
+    const width = open ? triggerRef.current?.clientWidth : undefined;
+    setPopupWidth(width);
+  }, [open]);
+
   // resolve listbox shorthand props
   const listbox: typeof listboxSlot = listboxSlot && {
     multiselect,
+    style: { width: `${popupWidth}px` },
     tabIndex: undefined,
     ...listboxSlot,
   };

From c562fe26de37a363ccdef81d2b4e3d3d05ba93fe Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Thu, 8 Sep 2022 16:20:48 -0700
Subject: [PATCH 2/3]  change file

---
 ...eact-combobox-7bb9e1fd-dd15-4dd6-bdff-951b259e85db.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-combobox-7bb9e1fd-dd15-4dd6-bdff-951b259e85db.json

diff --git a/change/@fluentui-react-combobox-7bb9e1fd-dd15-4dd6-bdff-951b259e85db.json b/change/@fluentui-react-combobox-7bb9e1fd-dd15-4dd6-bdff-951b259e85db.json
new file mode 100644
index 0000000000000..b33f444d83e51
--- /dev/null
+++ b/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"
+}

From eaf65bc17c6e1aa7c3089bb7caf53f5c3312172b Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Fri, 9 Sep 2022 14:04:03 -0700
Subject: [PATCH 3/3] base listbox width off root width

---
 .../__snapshots__/Combobox.test.tsx.snap         |  2 +-
 .../src/components/Combobox/useCombobox.tsx      | 16 +++++++++++++++-
 .../__snapshots__/Dropdown.test.tsx.snap         |  2 +-
 .../src/components/Dropdown/useDropdown.tsx      | 16 +++++++++++++++-
 .../src/utils/useTriggerListboxSlots.ts          |  8 --------
 5 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap b/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap
index be8774d5ac05a..387507376d143 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap
+++ b/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"
diff --git a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
index d5ff1d8c21455..0d01a51851ed9 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
+++ b/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(
diff --git a/packages/react-components/react-combobox/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/react-components/react-combobox/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index 5059a9e61d2d0..7dcf6069bcc49 100644
--- a/packages/react-components/react-combobox/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/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"
diff --git a/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx
index 3b8eab7952fff..180772ae1a3e4 100644
--- a/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx
+++ b/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;
 };
diff --git a/packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts b/packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts
index bb535f187e950..c90f3f1e02fa2 100644
--- a/packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts
+++ b/packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts
@@ -52,17 +52,9 @@ export function useTriggerListboxSlots(
   // handle trigger focus/blur
   const triggerRef: typeof ref = React.useRef(null);
 
-  // calculate listbox width style based on trigger width
-  const [popupWidth, setPopupWidth] = React.useState<number>();
-  React.useEffect(() => {
-    const width = open ? triggerRef.current?.clientWidth : undefined;
-    setPopupWidth(width);
-  }, [open]);
-
   // resolve listbox shorthand props
   const listbox: typeof listboxSlot = listboxSlot && {
     multiselect,
-    style: { width: `${popupWidth}px` },
     tabIndex: undefined,
     ...listboxSlot,
   };