[WC-3265] Better placement of filter dropdowns (#2044)

Author: r0b1n

packages/pluggableWidgets/datagrid-date-filter-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We improved the filter selector dropdown behavior so it now automatically selects the best placement based on the available space.
+
 ## [3.8.0] - 2026-01-16
 
 ### Fixed

packages/pluggableWidgets/datagrid-dropdown-filter-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We improved the dropdown and filter selector behavior so that it now automatically selects the best placement based on the available space.
+
 ## [3.6.0] - 2025-10-01
 
 ### Changed

packages/pluggableWidgets/datagrid-number-filter-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We improved the filter selector dropdown behavior so it now automatically selects the best placement based on the available space.
+
 ## [3.6.0] - 2025-10-01
 
 ### Changed

packages/pluggableWidgets/datagrid-text-filter-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We improved the filter selector dropdown behavior so it now automatically selects the best placement based on the available space.
+
 ## [3.6.0] - 2025-10-01
 
 ### Changed

packages/shared/widget-plugin-dropdown-filter/src/controls/hooks/useFloatingMenu.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { autoUpdate, ReferenceType, size, useFloating } from "@floating-ui/react-dom";
+import { autoUpdate, flip, ReferenceType, size, useFloating } from "@floating-ui/react-dom";
 
 export function useFloatingMenu<T extends ReferenceType = HTMLDivElement>(
     open: boolean
@@ -12,6 +12,10 @@ export function useFloatingMenu<T extends ReferenceType = HTMLDivElement>(
                         width: `${rects.reference.width}px`
                     });
                 }
+            }),
+            flip({
+                crossAxis: false,
+                fallbackStrategy: "initialPlacement"
             })
         ],
         []

packages/shared/widget-plugin-filtering/src/controls/filter-selector/useSelect.tsx

@@ -1,4 +1,4 @@
-import { autoUpdate, useFloating } from "@floating-ui/react-dom";
+import { autoUpdate, flip, useFloating } from "@floating-ui/react-dom";
 import { useSelect as useDownshiftSelect, UseSelectPropGetters } from "downshift";
 import { CSSProperties, JSX, useCallback, useEffect, useMemo } from "react";
 
@@ -39,8 +39,18 @@ export function useSelect(props: useSelectProps): ViewProps {
         onSelectedItemChange: ({ selectedItem }) => props.onSelect(selectedItem?.value ?? null)
     });
 
+    const floatingMiddleware = useMemo(
+        () => [
+            flip({
+                fallbackStrategy: "initialPlacement"
+            })
+        ],
+        []
+    );
+
     const { refs, floatingStyles, update } = useFloating({
         open: isOpen,
+        middleware: floatingMiddleware,
         placement: "bottom-start",
         strategy: "fixed"
     });