diff --git a/packages/pluggableWidgets/datagrid-date-filter-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-date-filter-web/CHANGELOG.md index 0a25cd8287..1fc06e52a3 100644 --- a/packages/pluggableWidgets/datagrid-date-filter-web/CHANGELOG.md +++ b/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 diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-dropdown-filter-web/CHANGELOG.md index a13e3c4090..19a440d967 100644 --- a/packages/pluggableWidgets/datagrid-dropdown-filter-web/CHANGELOG.md +++ b/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 diff --git a/packages/pluggableWidgets/datagrid-number-filter-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-number-filter-web/CHANGELOG.md index 2a441a35b9..0608803fb3 100644 --- a/packages/pluggableWidgets/datagrid-number-filter-web/CHANGELOG.md +++ b/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 diff --git a/packages/pluggableWidgets/datagrid-text-filter-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-text-filter-web/CHANGELOG.md index 8d696f446c..b01be7a4af 100644 --- a/packages/pluggableWidgets/datagrid-text-filter-web/CHANGELOG.md +++ b/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 diff --git a/packages/shared/widget-plugin-dropdown-filter/src/controls/hooks/useFloatingMenu.tsx b/packages/shared/widget-plugin-dropdown-filter/src/controls/hooks/useFloatingMenu.tsx index 30a555b945..e00acd7d46 100644 --- a/packages/shared/widget-plugin-dropdown-filter/src/controls/hooks/useFloatingMenu.tsx +++ b/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( open: boolean @@ -12,6 +12,10 @@ export function useFloatingMenu( width: `${rects.reference.width}px` }); } + }), + flip({ + crossAxis: false, + fallbackStrategy: "initialPlacement" }) ], [] diff --git a/packages/shared/widget-plugin-filtering/src/controls/filter-selector/useSelect.tsx b/packages/shared/widget-plugin-filtering/src/controls/filter-selector/useSelect.tsx index bb63821e3a..a3c44450b6 100644 --- a/packages/shared/widget-plugin-filtering/src/controls/filter-selector/useSelect.tsx +++ b/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" });