test(data-widgets): cleanup method floatingUI autoUpdate

Author: rahmanunver

packages/pluggableWidgets/datagrid-date-filter-web/src/components/__tests__/__snapshots__/DatagridDateFilter.spec.tsx.snap

@@ -30,7 +30,7 @@ exports[`Date Filter with single instance with double attributes renders correct
           class="filter-selectors hidden"
           id="downshift-:ra:-menu"
           role="listbox"
-          style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
+          style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 0px);"
         />
       </div>
     </div>
@@ -108,7 +108,7 @@ exports[`Date Filter with single instance with single attribute renders correctl
           class="filter-selectors hidden"
           id="downshift-:r0:-menu"
           role="listbox"
-          style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
+          style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 0px);"
         />
       </div>
     </div>

packages/pluggableWidgets/datagrid-date-filter-web/src/components/__tests__/__snapshots__/FilterComponent.spec.tsx.snap

@@ -30,7 +30,7 @@ exports[`Filter component renders correctly 1`] = `
           class="filter-selectors hidden"
           id="downshift-:r0:-menu"
           role="listbox"
-          style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
+          style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 0px);"
         />
       </div>
     </div>
@@ -158,7 +158,7 @@ exports[`Filter component renders correctly with aria labels 1`] = `
           class="filter-selectors hidden"
           id="downshift-:r3:-menu"
           role="listbox"
-          style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
+          style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 0px);"
         />
       </div>
     </div>

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

@@ -6,10 +6,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
-### Fixed
-
-- We fixed an issue with filter popup positioning.
-
 ## [2.10.1] - 2025-04-16
 
 ### Fixed

packages/pluggableWidgets/datagrid-dropdown-filter-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-dropdown-filter-web",
     "widgetName": "DatagridDropdownFilter",
-    "version": "2.10.2",
+    "version": "2.10.1",
     "description": "",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="DatagridDropdownFilter" version="2.10.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="DatagridDropdownFilter" version="2.10.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DatagridDropdownFilter.xml" />
         </widgetFiles>

packages/pluggableWidgets/datagrid-number-filter-web/src/components/__tests__/__snapshots__/DatagridNumberFilter.spec.tsx.snap

@@ -30,7 +30,7 @@ exports[`Number Filter with single instance with multiple attributes renders cor
           class="filter-selectors hidden"
           id="downshift-:r7:-menu"
           role="listbox"
-          style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
+          style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 0px);"
         />
       </div>
     </div>
@@ -83,7 +83,7 @@ exports[`Number Filter with single instance with single attribute renders correc
           class="filter-selectors hidden"
           id="downshift-:r0:-menu"
           role="listbox"
-          style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
+          style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 0px);"
         />
       </div>
     </div>

packages/pluggableWidgets/datagrid-text-filter-web/src/components/__tests__/__snapshots__/DatagridTextFilter.spec.tsx.snap

@@ -30,7 +30,7 @@ exports[`Text Filter with single instance with multiple attributes renders corre
           class="filter-selectors hidden"
           id="downshift-:r8:-menu"
           role="listbox"
-          style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
+          style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 0px);"
         />
       </div>
     </div>
@@ -83,7 +83,7 @@ exports[`Text Filter with single instance with single attribute renders correctl
           class="filter-selectors hidden"
           id="downshift-:r5:-menu"
           role="listbox"
-          style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
+          style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 0px);"
         />
       </div>
     </div>

packages/pluggableWidgets/datagrid-web/src/components/ColumnSelector.tsx

@@ -1,5 +1,5 @@
 import { autoUpdate, size, useClick, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
-import { createElement, ReactElement, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createElement, ReactElement, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { GridColumn } from "../typings/GridColumn";
 import { FaEye } from "./icons/FaEye";
@@ -16,10 +16,10 @@ export function ColumnSelector(props: ColumnSelectorProps): ReactElement {
     const [show, setShow] = useState(false);
     const [maxHeight, setMaxHeight] = useState<number>(0);
     const buttonRef = useRef<HTMLButtonElement>(null);
-    const { refs, floatingStyles, context } = useFloating({
+    const { refs, floatingStyles, context, update } = useFloating({
         open: show,
         placement: "bottom-end",
-        strategy: "absolute",
+        strategy: "fixed",
         onOpenChange: setShow,
         middleware: [
             size({
@@ -30,10 +30,16 @@ export function ColumnSelector(props: ColumnSelectorProps): ReactElement {
                 }
             })
         ],
-        transform: false,
-        whileElementsMounted: autoUpdate
+        transform: false
     });
 
+    useEffect(() => {
+        if (!show || !refs.reference.current || !refs.floating.current) {
+            return;
+        }
+        return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }, [show, refs.reference, refs.floating, update]);
+
     const dismiss = useDismiss(context);
     const click = useClick(context);
     const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);

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

@@ -1,6 +1,6 @@
 import { autoUpdate, useFloating } from "@floating-ui/react-dom";
 import { UseSelectPropGetters, useSelect as useDownshiftSelect } from "downshift";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useEffect } from "react";
 
 interface Option {
     value: string;
@@ -39,13 +39,19 @@ export function useSelect(props: useSelectProps): ViewProps {
         onSelectedItemChange: ({ selectedItem }) => props.onSelect(selectedItem.value)
     });
 
-    const { refs, floatingStyles } = useFloating({
+    const { refs, floatingStyles, update } = useFloating({
         open: isOpen,
         placement: "bottom-start",
-        strategy: "absolute",
-        whileElementsMounted: autoUpdate
+        strategy: "fixed"
     });
 
+    useEffect(() => {
+        if (!isOpen || !refs.reference.current || !refs.floating.current) {
+            return;
+        }
+        return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }, [isOpen, refs.reference, refs.floating, update]);
+
     const listboxLabel = props.ariaLabel || "Select filter type";
     const buttonLabel = selectedItem?.caption || listboxLabel;