fix(combobox): position menu with floating-ui to stop it jumping

Author: yordan-st

packages/pluggableWidgets/combobox-web/src/__tests__/MultiSelection.spec.tsx

@@ -1,4 +1,5 @@
 import "@testing-library/jest-dom";
+jest.mock("../hooks/useFloatingMenu");
 import { fireEvent, render, RenderResult, waitFor } from "@testing-library/react";
 import { resetIdCounter } from "downshift";
 import { ListValue } from "mendix";
@@ -94,6 +95,16 @@ describe("Combo box (Association)", () => {
         const { container } = render(<Combobox {...defaultProps} />);
         expect(container.getElementsByClassName("widget-combobox-placeholder")).toHaveLength(1);
     });
+    it("positions the open menu via floating-ui (applies floatingStyles to the menu)", async () => {
+        const component = render(<Combobox {...defaultProps} />);
+        const input = await getInput(component);
+        fireEvent.click(input);
+        await waitFor(() => {
+            expect(component.getAllByRole("option")).toHaveLength(4);
+        });
+        const menu = component.container.querySelector(".widget-combobox-menu") as HTMLElement;
+        expect(menu.style.getPropertyValue("--this-is-mocked-from-unit-tests")).toEqual("true");
+    });
     it("toggles combobox menu on: input CLICK(focus) / BLUR", async () => {
         const component = render(<Combobox {...defaultProps} />);
         const input = await getInput(component);

packages/pluggableWidgets/combobox-web/src/__tests__/SingleSelection.spec.tsx

@@ -1,4 +1,5 @@
 import "@testing-library/jest-dom";
+jest.mock("../hooks/useFloatingMenu");
 import { act, fireEvent, render, RenderResult, waitFor } from "@testing-library/react";
 import { resetIdCounter } from "downshift";
 import { ListValue } from "mendix";
@@ -114,6 +115,18 @@ describe("Combo box (Association)", () => {
         });
         expect(component.queryAllByRole("option")).toHaveLength(0);
     });
+    it("positions the open menu via floating-ui (applies floatingStyles to the menu)", async () => {
+        const component = render(<Combobox {...defaultProps} />);
+        const toggleButton = await getToggleButton(component);
+        await act(() => {
+            fireEvent.click(toggleButton);
+        });
+        await waitFor(() => {
+            expect(component.getAllByRole("option")).toHaveLength(4);
+        });
+        const menu = component.container.querySelector(".widget-combobox-menu") as HTMLElement;
+        expect(menu.style.getPropertyValue("--this-is-mocked-from-unit-tests")).toEqual("true");
+    });
     it("sets option to selected item", async () => {
         const component = render(<Combobox {...defaultProps} />);
         const value = await getVisibleValueNode(component);

packages/pluggableWidgets/combobox-web/src/components/ComboboxMenuWrapper.tsx

@@ -1,11 +1,12 @@
 import classNames from "classnames";
 import { UseComboboxPropGetters } from "downshift/typings";
-import { MouseEvent, PropsWithChildren, ReactElement, ReactNode } from "react";
-import { useMenuStyle } from "../hooks/useMenuStyle";
+import { CSSProperties, MouseEvent, PropsWithChildren, ReactElement, ReactNode, Ref } from "react";
 import { NoOptionsPlaceholder } from "./Placeholder";
 
 interface ComboboxMenuWrapperProps extends PropsWithChildren, Partial<UseComboboxPropGetters<string>> {
     alwaysOpen?: boolean;
+    floatingRef?: Ref<HTMLDivElement>;
+    floatingStyles?: CSSProperties;
     highlightedIndex?: number | null;
     isEmpty: boolean;
     isLoading: boolean;
@@ -32,6 +33,8 @@ export function ComboboxMenuWrapper(props: ComboboxMenuWrapperProps): ReactEleme
     const {
         alwaysOpen,
         children,
+        floatingRef,
+        floatingStyles,
         getMenuProps,
         highlightedIndex,
         isEmpty,
@@ -46,11 +49,9 @@ export function ComboboxMenuWrapper(props: ComboboxMenuWrapperProps): ReactEleme
         onScroll
     } = props;
 
-    const [ref, style] = useMenuStyle<HTMLDivElement>(isOpen);
-
     return (
         <div
-            ref={ref}
+            ref={alwaysOpen ? undefined : floatingRef}
             className={classNames("widget-combobox-menu", { "widget-combobox-menu-hidden": !isOpen })}
             style={
                 alwaysOpen
@@ -59,7 +60,7 @@ export function ComboboxMenuWrapper(props: ComboboxMenuWrapperProps): ReactEleme
                           visibility: "visible",
                           position: "relative"
                       }
-                    : style
+                    : floatingStyles
             }
             data-overlay-content={isOpen || undefined}
         >

packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx

@@ -4,6 +4,7 @@ import { ClearButton } from "../../assets/icons";
 import { MultiSelector, SelectionBaseProps } from "../../helpers/types";
 import { getInputLabel, getSelectedCaptionsPlaceholder, getValidationErrorId } from "../../helpers/utils";
 import { useDownshiftMultiSelectProps } from "../../hooks/useDownshiftMultiSelectProps";
+import { useFloatingMenu } from "../../hooks/useFloatingMenu";
 import { useLazyLoading } from "../../hooks/useLazyLoading";
 import { ComboboxWrapper } from "../ComboboxWrapper";
 import { InputPlaceholder } from "../Placeholder";
@@ -35,6 +36,7 @@ export function MultiSelection({
         setSelectedItems,
         toggleSelectedItem
     } = useDownshiftMultiSelectProps(selector, options, inputRef, a11yConfig.a11yStatusMessage);
+    const { refs, floatingStyles } = useFloatingMenu(isOpen);
     const isSelectedItemsBoxStyle = selector.selectedItemsStyle === "boxes";
     const isOptionsSelected = selector.isOptionsSelected();
     const inputLabel = getInputLabel(options.inputId);
@@ -90,6 +92,7 @@ export function MultiSelection({
     return (
         <Fragment>
             <ComboboxWrapper
+                ref={refs.setReference}
                 isOpen={isOpen}
                 readOnly={selector.readOnly}
                 readOnlyStyle={options.readOnlyStyle}
@@ -201,6 +204,8 @@ export function MultiSelection({
                 isLoading={selector.options.isLoading}
                 lazyLoading={lazyLoading}
                 onScroll={onScroll}
+                floatingRef={refs.setFloating}
+                floatingStyles={floatingStyles}
             />
         </Fragment>
     );

packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelectionMenu.tsx

@@ -1,5 +1,5 @@
 import { UseComboboxPropGetters } from "downshift/typings";
-import { MouseEvent, ReactElement, ReactNode } from "react";
+import { CSSProperties, MouseEvent, ReactElement, ReactNode, Ref } from "react";
 import { Checkbox } from "../../assets/icons";
 import { MultiSelector } from "../../helpers/types";
 import { ComboboxMenuWrapper } from "../ComboboxMenuWrapper";
@@ -20,6 +20,8 @@ interface MultiSelectionMenuProps extends Partial<UseComboboxPropGetters<string>
     isLoading: boolean;
     lazyLoading: boolean;
     onScroll: (e: any) => void;
+    floatingRef?: Ref<HTMLDivElement>;
+    floatingStyles?: CSSProperties;
 }
 
 export function MultiSelectionMenu({
@@ -36,10 +38,14 @@ export function MultiSelectionMenu({
     onOptionClick,
     isLoading,
     lazyLoading,
-    onScroll
+    onScroll,
+    floatingRef,
+    floatingStyles
 }: MultiSelectionMenuProps): ReactElement {
     return (
         <ComboboxMenuWrapper
+            floatingRef={floatingRef}
+            floatingStyles={floatingStyles}
             getMenuProps={getMenuProps}
             highlightedIndex={highlightedIndex}
             isEmpty={selectableItems.length <= 0}

packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx

@@ -4,6 +4,7 @@ import { ClearButton } from "../../assets/icons";
 import { SelectionBaseProps, SingleSelector } from "../../helpers/types";
 import { getInputLabel, getValidationErrorId } from "../../helpers/utils";
 import { useDownshiftSingleSelectProps } from "../../hooks/useDownshiftSingleSelectProps";
+import { useFloatingMenu } from "../../hooks/useFloatingMenu";
 import { useLazyLoading } from "../../hooks/useLazyLoading";
 import { ComboboxWrapper } from "../ComboboxWrapper";
 import { InputPlaceholder } from "../Placeholder";
@@ -30,6 +31,7 @@ export function SingleSelection({
         selectItem
     } = useDownshiftSingleSelectProps(selector, options, a11yConfig.a11yStatusMessage);
     const inputRef = useRef<HTMLInputElement>(null);
+    const { refs, floatingStyles } = useFloatingMenu(keepMenuOpen === true ? false : isOpen);
     const lazyLoading = selector.lazyLoading ?? false;
     const { onScroll } = useLazyLoading({
         hasMoreItems: selector.options.hasMore ?? false,
@@ -86,6 +88,7 @@ export function SingleSelection({
     return (
         <Fragment>
             <ComboboxWrapper
+                ref={refs.setReference}
                 isOpen={isOpen || keepMenuOpen === true}
                 readOnly={selector.readOnly}
                 readOnlyStyle={options.readOnlyStyle}
@@ -154,6 +157,8 @@ export function SingleSelection({
                 isLoading={selector.options.isLoading}
                 lazyLoading={lazyLoading}
                 onScroll={onScroll}
+                floatingRef={refs.setFloating}
+                floatingStyles={floatingStyles}
             />
         </Fragment>
     );

packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelectionMenu.tsx

@@ -1,5 +1,5 @@
 import { UseComboboxPropGetters } from "downshift/typings";
-import { ReactElement, ReactNode } from "react";
+import { CSSProperties, ReactElement, ReactNode, Ref } from "react";
 import { SingleSelector } from "../../helpers/types";
 import { ComboboxMenuWrapper } from "../ComboboxMenuWrapper";
 import { ComboboxOptionWrapper } from "../ComboboxOptionWrapper";
@@ -16,6 +16,8 @@ interface ComboboxMenuProps extends Partial<UseComboboxPropGetters<string>> {
     isLoading: boolean;
     lazyLoading: boolean;
     onScroll: (e: any) => void;
+    floatingRef?: Ref<HTMLDivElement>;
+    floatingStyles?: CSSProperties;
 }
 
 export function SingleSelectionMenu({
@@ -29,13 +31,17 @@ export function SingleSelectionMenu({
     menuFooterContent,
     isLoading,
     lazyLoading,
-    onScroll
+    onScroll,
+    floatingRef,
+    floatingStyles
 }: ComboboxMenuProps): ReactElement {
     const items = selector.options.getAll();
 
     return (
         <ComboboxMenuWrapper
             alwaysOpen={alwaysOpen}
+            floatingRef={floatingRef}
+            floatingStyles={floatingStyles}
             getMenuProps={getMenuProps}
             isEmpty={items?.length <= 0}
             isLoading={isLoading}

packages/pluggableWidgets/combobox-web/src/components/__tests__/ComboboxMenuWrapper.spec.tsx

@@ -0,0 +1,51 @@
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import { createRef } from "react";
+import { ComboboxMenuWrapper } from "../ComboboxMenuWrapper";
+
+const baseProps = {
+    isEmpty: false,
+    isLoading: false,
+    lazyLoading: false,
+    loader: null,
+    getMenuProps: (options?: any) => ({ ...options })
+};
+
+describe("ComboboxMenuWrapper", () => {
+    it("applies floating styles to the menu when open and not alwaysOpen", () => {
+        const floatingRef = createRef<HTMLDivElement>();
+        const { container } = render(
+            <ComboboxMenuWrapper
+                {...baseProps}
+                isOpen
+                floatingRef={floatingRef}
+                floatingStyles={{ position: "fixed", top: 10, left: 20 }}
+            />
+        );
+
+        const menu = container.querySelector(".widget-combobox-menu") as HTMLElement;
+        expect(menu.style.position).toBe("fixed");
+        expect(menu.style.top).toBe("10px");
+        // floating ref is attached so floating-ui can measure/position the element
+        expect(floatingRef.current).toBe(menu);
+    });
+
+    it("renders inline (position: relative) and ignores floating positioning when alwaysOpen", () => {
+        const floatingRef = createRef<HTMLDivElement>();
+        const { container } = render(
+            <ComboboxMenuWrapper
+                {...baseProps}
+                isOpen
+                alwaysOpen
+                floatingRef={floatingRef}
+                floatingStyles={{ position: "fixed", top: 10, left: 20 }}
+            />
+        );
+
+        const menu = container.querySelector(".widget-combobox-menu") as HTMLElement;
+        expect(menu.style.position).toBe("relative");
+        expect(menu.style.top).toBe("");
+        // floating ref must NOT be attached in alwaysOpen mode
+        expect(floatingRef.current).toBeNull();
+    });
+});