From ddd5c966edbfacd0f51e116eca65dfdfa2e691ca Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 11 Apr 2023 10:46:52 -0700 Subject: [PATCH 1/3] fix: react-combobox uses fallbackPositions for popup --- .../react-combobox/src/utils/useComboboxPopup.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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), }; From ea313cdb385a9e229ef36c7365ee4b2b73010bf1 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 11 Apr 2023 10:56:27 -0700 Subject: [PATCH 2/3] change file --- ...eact-combobox-c627d0c3-82f4-4593-8a10-546a41227e16.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-combobox-c627d0c3-82f4-4593-8a10-546a41227e16.json 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..edf480a1362831 --- /dev/null +++ b/change/@fluentui-react-combobox-c627d0c3-82f4-4593-8a10-546a41227e16.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: popup defines fallbackPositions to use when it doesn't fit the screen", + "packageName": "@fluentui/react-combobox", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} From 442b3b3835f6d282144b60595bdfb13002515a25 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 11 Apr 2023 14:12:40 -0700 Subject: [PATCH 3/3] Update changefile wording Co-authored-by: Micah Godbolt --- ...tui-react-combobox-c627d0c3-82f4-4593-8a10-546a41227e16.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-combobox-c627d0c3-82f4-4593-8a10-546a41227e16.json b/change/@fluentui-react-combobox-c627d0c3-82f4-4593-8a10-546a41227e16.json index edf480a1362831..9bf44465fc0868 100644 --- a/change/@fluentui-react-combobox-c627d0c3-82f4-4593-8a10-546a41227e16.json +++ b/change/@fluentui-react-combobox-c627d0c3-82f4-4593-8a10-546a41227e16.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "fix: popup defines fallbackPositions to use when it doesn't fit the screen", + "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"