fix(ui): hide Workboard selects before positioning (#102867)

Co-authored-by: wm0018 <wu.min5@xydigit.com>

ui/src/pages/workboard/view.test.ts

@@ -2887,6 +2887,11 @@ describe("renderWorkboard", () => {
       expect(menu?.style.getPropertyValue("--workboard-select-menu-top")).toBe("162px");
       expect(menu?.style.getPropertyValue("--workboard-select-menu-width")).toBe("240px");
       expect(menu?.style.getPropertyValue("--workboard-select-menu-max-height")).toBe("320px");
+      expect(menu?.style.visibility).toBe("visible");
+
+      select!.open = false;
+      select!.dispatchEvent(new Event("toggle"));
+      expect(menu?.style.visibility).toBe("hidden");
     } finally {
       innerWidth.mockRestore();
     }

ui/src/pages/workboard/view.ts

@@ -838,6 +838,7 @@ function positionWorkboardSelectMenu(details: HTMLDetailsElement) {
     menu.style.removeProperty("--workboard-select-menu-top");
     menu.style.removeProperty("--workboard-select-menu-width");
     menu.style.removeProperty("--workboard-select-menu-max-height");
+    menu.style.visibility = "hidden";
     return;
   }
   const rect = trigger.getBoundingClientRect();
@@ -863,6 +864,7 @@ function positionWorkboardSelectMenu(details: HTMLDetailsElement) {
     : Math.min(rect.bottom + gap, viewportHeight - gutter - maxHeight);
 
   menu.style.setProperty("--workboard-select-menu-top", `${top}px`);
+  menu.style.visibility = "visible";
 }
 
 function getEnabledWorkboardSelectOptions(details: HTMLDetailsElement): HTMLButtonElement[] {

ui/src/pages/workboard/workboard.e2e.test.ts

@@ -343,6 +343,47 @@ describeControlUiE2e("Control UI Workboard mocked Gateway E2E", () => {
         .locator(".workboard-toolbar__filters .workboard-select")
         .nth(1);
       const priorityTrigger = prioritySelect.locator(".workboard-select__trigger");
+      const priorityMenu = prioritySelect.locator(".workboard-select__menu");
+      const immediateOpen = await prioritySelect.evaluate((select) => {
+        const details = select as HTMLDetailsElement;
+        const menu = details.querySelector<HTMLElement>(".workboard-select__menu");
+        if (!menu) {
+          throw new Error("Workboard select menu is missing");
+        }
+        details.open = true;
+        const style = getComputedStyle(menu);
+        return { left: style.left, top: style.top, visibility: style.visibility };
+      });
+      expect(immediateOpen).toEqual({ left: "0px", top: "0px", visibility: "hidden" });
+      await expect
+        .poll(() => priorityMenu.evaluate((menu) => menu.style.visibility))
+        .toBe("visible");
+      const positionedMenu = await prioritySelect.evaluate((select) => {
+        const trigger = select.querySelector<HTMLElement>(".workboard-select__trigger");
+        const menu = select.querySelector<HTMLElement>(".workboard-select__menu");
+        if (!trigger || !menu) {
+          throw new Error("Workboard select is incomplete");
+        }
+        const triggerRect = trigger.getBoundingClientRect();
+        const menuRect = menu.getBoundingClientRect();
+        return {
+          menuLeft: menuRect.left,
+          menuTop: menuRect.top,
+          triggerBottom: triggerRect.bottom,
+          triggerLeft: triggerRect.left,
+          visibility: getComputedStyle(menu).visibility,
+        };
+      });
+      expect(positionedMenu.visibility).toBe("visible");
+      expect(Math.abs(positionedMenu.menuLeft - positionedMenu.triggerLeft)).toBeLessThanOrEqual(1);
+      expect(positionedMenu.menuTop).toBeGreaterThan(positionedMenu.triggerBottom);
+      await prioritySelect.evaluate((select) => {
+        (select as HTMLDetailsElement).open = false;
+      });
+      await expect
+        .poll(() => priorityMenu.evaluate((menu) => menu.style.visibility))
+        .toBe("hidden");
+
       await priorityTrigger.focus();
       await writable.page.keyboard.press("ArrowDown");
       expect(await writable.page.locator(":focus").textContent()).toContain("All priorities");

ui/src/styles/workboard.css

@@ -462,6 +462,7 @@
   top: var(--workboard-select-menu-top, 0);
   left: var(--workboard-select-menu-left, 0);
   display: none;
+  visibility: hidden;
   gap: 2px;
   width: var(--workboard-select-menu-width, 100%);
   max-height: var(--workboard-select-menu-max-height, min(320px, calc(100vh - 220px)));