diff --git a/change/@fluentui-react-combobox-c627d0c3-82f4-4593-8a10-546a41227e16.json b/change/@fluentui-react-combobox-c627d0c3-82f4-4593-8a10-546a41227e16.json new file mode 100644 index 00000000000000..9bf44465fc0868 --- /dev/null +++ b/change/@fluentui-react-combobox-c627d0c3-82f4-4593-8a10-546a41227e16.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: popup now defines fallbackPositions to use when it doesn't fit the screen", + "packageName": "@fluentui/react-combobox", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-combobox/src/utils/useComboboxPopup.ts b/packages/react-components/react-combobox/src/utils/useComboboxPopup.ts index b011dada2ce6e4..fe85bf972fefda 100644 --- a/packages/react-components/react-combobox/src/utils/useComboboxPopup.ts +++ b/packages/react-components/react-combobox/src/utils/useComboboxPopup.ts @@ -1,4 +1,4 @@ -import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning'; +import { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning'; import { ExtractSlotProps, Slot, useMergedRefs } from '@fluentui/react-utilities'; import type { ComboboxBaseProps } from './ComboboxBase.types'; import { Listbox } from '../components/Listbox/Listbox'; @@ -24,11 +24,15 @@ export function useComboboxPopup( ] { const { positioning } = props; + // Set a default set of fallback positions to try if the dropdown does not fit on screen + const fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top']; + // popper options const popperOptions = { position: 'below' as const, align: 'start' as const, offset: { crossAxis: 0, mainAxis: 2 }, + fallbackPositions, ...resolvePositioningShorthand(positioning), };