fix(web): keep event action menu open

Author: Uarmagan

packages/web/src/views/Forms/ActionsMenu/ActionsMenu.test.tsx

@@ -0,0 +1,88 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { type PropsWithChildren, type ReactElement } from "react";
+import { ThemeProvider } from "styled-components";
+import { theme } from "@web/common/styles/theme";
+import { afterEach, describe, expect, it, mock } from "bun:test";
+
+let listNavigationProps: { focusItemOnHover?: boolean } | null = null;
+let floatingOptions: { onOpenChange?: (open: boolean) => void } | null = null;
+let focusManagerProps: { closeOnFocusOut?: boolean } | null = null;
+
+mock.module("@floating-ui/react", () => ({
+  autoUpdate: mock(),
+  flip: mock(() => ({})),
+  FloatingFocusManager: ({
+    children,
+    ...props
+  }: PropsWithChildren<{ closeOnFocusOut?: boolean }>) => {
+    focusManagerProps = props;
+    return <>{children}</>;
+  },
+  FloatingPortal: ({ children }: PropsWithChildren) => <>{children}</>,
+  offset: mock(() => ({})),
+  shift: mock(() => ({})),
+  useClick: mock(() => ({})),
+  useDismiss: mock(() => ({})),
+  useFloating: (options: { onOpenChange?: (open: boolean) => void }) => {
+    floatingOptions = options;
+    return {
+      context: {
+        floatingStyles: {},
+      },
+      refs: {
+        setFloating: mock(),
+        setReference: mock(),
+      },
+    };
+  },
+  useInteractions: mock(() => ({
+    getFloatingProps: (props = {}) => props,
+    getItemProps: (props = {}) => props,
+    getReferenceProps: (
+      props: { onClick?: (event: MouseEvent) => void } = {},
+    ) => ({
+      ...props,
+      onClick: (event: MouseEvent) => {
+        props.onClick?.(event);
+        floatingOptions?.onOpenChange?.(true);
+      },
+    }),
+  })),
+  useListNavigation: mock((_context, props) => {
+    listNavigationProps = props as { focusItemOnHover?: boolean };
+    return {};
+  }),
+  useRole: mock(() => ({})),
+}));
+
+mock.module("@web/common/hooks/useGridMaxZIndex", () => ({
+  useGridMaxZIndex: () => 0,
+}));
+
+const { ActionsMenu } =
+  require("./ActionsMenu") as typeof import("./ActionsMenu");
+
+const renderWithTheme = (ui: ReactElement) =>
+  render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>);
+
+describe("ActionsMenu", () => {
+  afterEach(() => {
+    floatingOptions = null;
+    focusManagerProps = null;
+    listNavigationProps = null;
+  });
+
+  it("keeps hover from moving focus to menu items", () => {
+    renderWithTheme(<ActionsMenu bgColor="#fff">{() => null}</ActionsMenu>);
+
+    expect(listNavigationProps?.focusItemOnHover).toBe(false);
+  });
+
+  it("keeps the floating menu from dismissing on focus movement", () => {
+    renderWithTheme(<ActionsMenu bgColor="#fff">{() => null}</ActionsMenu>);
+
+    fireEvent.click(screen.getByRole("button", { name: "Open actions menu" }));
+
+    expect(focusManagerProps?.closeOnFocusOut).toBe(false);
+  });
+});

packages/web/src/views/Forms/ActionsMenu/ActionsMenu.tsx

@@ -134,6 +134,7 @@ export const ActionsMenu: React.FC<ActionsMenuProps> = ({
         setActiveIndex(sparseIndex);
       }
     },
+    focusItemOnHover: false,
     loop: true,
   });
 
@@ -179,6 +180,7 @@ export const ActionsMenu: React.FC<ActionsMenuProps> = ({
           <FloatingFocusManager
             context={context}
             modal={false}
+            closeOnFocusOut={false}
             initialFocus={openedByMouseRef.current ? -1 : 0}
             returnFocus={false}
           >

packages/web/src/views/Week/components/Draft/grid/GridDraft.test.tsx

@@ -11,7 +11,10 @@ import { DraftContext } from "@web/views/Week/components/Draft/context/DraftCont
 import { type WeekProps } from "@web/views/Week/hooks/useWeek";
 import { afterEach, describe, expect, it, mock } from "bun:test";
 
-let floatingFocusManagerProps: { modal?: boolean } | null = null;
+let floatingFocusManagerProps: {
+  closeOnFocusOut?: boolean;
+  modal?: boolean;
+} | null = null;
 
 mock.module("@floating-ui/react", () => ({
   FloatingFocusManager: ({
@@ -177,10 +180,11 @@ describe("GridDraft keyboard focus", () => {
     });
   });
 
-  it("keeps the floating form non-modal while the draft block is a focus target", () => {
+  it("keeps the floating form from dismissing when focus moves into nested menus", () => {
     renderGridDraft();
 
     expect(floatingFocusManagerProps?.modal).toBe(false);
+    expect(floatingFocusManagerProps?.closeOnFocusOut).toBe(false);
   });
 
   it("keeps an active overlapping saved draft at its stacked width while raising it", () => {

packages/web/src/views/Week/components/Draft/grid/GridDraft.tsx

@@ -133,7 +133,11 @@ export const GridDraft: FC<Props> = ({
       )}
 
       {isFormOpen && (
-        <FloatingFocusManager context={context} modal={false}>
+        <FloatingFocusManager
+          context={context}
+          modal={false}
+          closeOnFocusOut={false}
+        >
           <StyledFloatContainer
             ref={refs.setFloating}
             strategy={strategy}