[WC-3193] DG2: dropdown filter bug

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]
 
+### Fixed
+
+- Stabilized the dropdown anchor ref to prevent render loops and incorrect menu positioning.
+
 ## [3.6.0] - 2025-10-01
 
 ### Changed

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/hocs/withLinkedRefStore.tsx

@@ -92,6 +92,7 @@ function useGate(props: WidgetProps): DerivedPropsGate<RequiredProps> {
     useEffect(() => {
         gp.setProps(mapProps(props));
     });
+
     return gp.gate;
 }
 

packages/shared/widget-plugin-dropdown-filter/src/controls/select/Select.tsx

@@ -1,12 +1,13 @@
 import cn from "classnames";
 import { useSelect, UseSelectProps } from "downshift";
 import { observer } from "mobx-react-lite";
-import { CSSProperties, FocusEventHandler, ReactElement, UIEventHandler } from "react";
+import { CSSProperties, FocusEventHandler, ReactElement, Ref, UIEventHandler } from "react";
 import { OptionWithState } from "../../typings/OptionWithState";
 import { ClearButton } from "../base/ClearButton";
 import { OptionsWrapper } from "../base/OptionsWrapper";
 import { useFloatingMenu } from "../hooks/useFloatingMenu";
 import { Arrow, classes } from "../picker-primitives";
+import { useMergedRefs } from "../../utils/useMergedRefs";
 
 interface SelectProps {
     value: string;
@@ -33,18 +34,19 @@ export const Select = observer(function Select(props: SelectProps): ReactElement
     const showClear = clearable && !isEmpty;
 
     const { refs, floatingStyles } = useFloatingMenu(isOpen);
-
+    const { ref: downshiftRef, ...buttonProps } = getToggleButtonProps({
+        "aria-label": props.ariaLabel || "filter",
+        onFocus: props.onFocus
+    }) as ReturnType<typeof getToggleButtonProps> & { ref?: Ref<HTMLDivElement> };
+    const setReference = useMergedRefs<HTMLDivElement>(refs.setReference, downshiftRef);
     return (
         <div
+            ref={setReference}
             className={cn(cls.root, "form-control", "variant-select", props.className)}
             data-expanded={isOpen}
             data-empty={isEmpty ? true : undefined}
             style={props.style}
-            {...getToggleButtonProps({
-                "aria-label": props.ariaLabel || "filter",
-                ref: refs.setReference,
-                onFocus: props.onFocus
-            })}
+            {...buttonProps}
         >
             <div className={cls.inputContainer}>
                 <span className={cls.toggle}>{props.value}</span>

packages/shared/widget-plugin-dropdown-filter/src/utils/useMergedRefs.ts

@@ -0,0 +1,20 @@
+import { Ref, useCallback, useRef } from "react";
+
+export function useMergedRefs<T>(...refs: Array<Ref<T> | null | undefined>): (node: T | null) => void {
+    const refsRef = useRef(refs);
+    refsRef.current = refs;
+
+    return useCallback((node: T | null) => {
+        for (const ref of refsRef.current) {
+            if (!ref) {
+                continue;
+            }
+
+            if (typeof ref === "function") {
+                ref(node);
+            } else {
+                ref.current = node;
+            }
+        }
+    }, []);
+}