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 00000000000000..b33f444d83e511 --- /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" +} 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 be8774d5ac05a8..387507376d143a 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`] = `
(null); const triggerRef = React.useRef(null); + // calculate listbox width style based on trigger width + const [popupWidth, setPopupWidth] = React.useState(); + 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(); @@ -153,7 +162,10 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref
(null); + const [popupWidth, setPopupWidth] = React.useState(); + 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(); @@ -117,7 +126,10 @@ export const useDropdown_unstable = (props: DropdownProps, ref: React.Ref