@hanzogui/kitchen-sink 3.0.5

package/tests/MenuFocusLeave.test.tsx

@@ -0,0 +1,181 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Menu Focus Leave Behavior', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'MenuFocusLeaveCase',
+      type: 'useCase',
+      waitExtra: true,
+    })
+  })
+
+  /**
+   * Bug 1: When leaving the menu entirely, focus style stays on last element.
+   * Expected: When mouse leaves the menu, no items should have the focus highlight.
+   */
+  test('focus style clears when mouse leaves menu entirely', async ({ page }) => {
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    const item1 = page.getByTestId('menu-item-1')
+
+    // hover item 1 - it should be focused and highlighted
+    await item1.hover()
+    await page.waitForTimeout(100)
+    await expect(item1).toBeFocused()
+
+    const item1BgWhenFocused = await item1.evaluate(
+      (el) => getComputedStyle(el).backgroundColor
+    )
+    const hasHighlightAttr = await item1.getAttribute('data-highlighted')
+    expect(hasHighlightAttr).toBe('')
+
+    // move mouse outside the menu using raw mouse.move to avoid the portal overlay issue
+    // get the menu bounds and move outside of them
+    const menuBox = await menuContent.boundingBox()
+    if (!menuBox) throw new Error('Could not get menu bounds')
+
+    // move mouse below and to the left of the menu (outside the content)
+    await page.mouse.move(menuBox.x - 50, menuBox.y + menuBox.height + 50)
+    await page.waitForTimeout(200)
+
+    // CRITICAL: item1 should no longer have the highlight
+    const item1BgAfterLeave = await item1.evaluate(
+      (el) => getComputedStyle(el).backgroundColor
+    )
+    const hasHighlightAttrAfter = await item1.getAttribute('data-highlighted')
+
+    // the highlight attribute should be removed
+    expect(hasHighlightAttrAfter).toBeNull()
+    // the background should be different (default, not highlighted)
+    expect(item1BgAfterLeave).not.toBe(item1BgWhenFocused)
+  })
+
+  /**
+   * Bug 2: Two items can appear focused when moving quickly from one submenu
+   * trigger to another submenu trigger below it while the first submenu is
+   * animating open.
+   *
+   * Scenario:
+   * 1. Hover first submenu trigger (it starts opening its submenu)
+   * 2. Move quickly down to the second submenu trigger below
+   * 3. Only ONE item should have the focus highlight, not both
+   */
+  test('only one item highlighted when moving from submenu trigger to another below', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    const submenuTrigger1 = page.getByTestId('submenu-trigger-1')
+    const submenuTrigger2 = page.getByTestId('submenu-trigger-2')
+
+    // hover the first submenu trigger
+    await submenuTrigger1.hover()
+    await page.waitForTimeout(50) // brief hover, not enough for submenu to fully open
+
+    // confirm trigger is focused
+    await expect(submenuTrigger1).toBeFocused()
+
+    // move quickly to the second submenu trigger below
+    const trigger1Box = await submenuTrigger1.boundingBox()
+    const trigger2Box = await submenuTrigger2.boundingBox()
+
+    if (trigger1Box && trigger2Box) {
+      // move mouse in a quick path from trigger 1 to trigger 2
+      await page.mouse.move(
+        trigger1Box.x + trigger1Box.width / 2,
+        trigger1Box.y + trigger1Box.height
+      )
+      await page.mouse.move(
+        trigger2Box.x + trigger2Box.width / 2,
+        trigger2Box.y + trigger2Box.height / 2
+      )
+    }
+
+    await page.waitForTimeout(150)
+
+    // CRITICAL: only submenuTrigger2 should be highlighted, not both
+    const trigger1Highlight = await submenuTrigger1.getAttribute('data-highlighted')
+    const trigger2Highlight = await submenuTrigger2.getAttribute('data-highlighted')
+
+    // the second trigger should be highlighted
+    expect(trigger2Highlight).toBe('')
+
+    // the first trigger should NOT be highlighted
+    expect(trigger1Highlight).toBeNull()
+  })
+
+  /**
+   * Bug 2b: More specific test - when moving at a very specific speed
+   * during the submenu opening animation, both triggers can appear focused.
+   */
+  test('no double highlight during submenu open with rapid downward movement', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    const submenuTrigger1 = page.getByTestId('submenu-trigger-1')
+    const submenuTrigger2 = page.getByTestId('submenu-trigger-2')
+
+    // get bounding boxes
+    const trigger1Box = await submenuTrigger1.boundingBox()
+    const trigger2Box = await submenuTrigger2.boundingBox()
+
+    if (!trigger1Box || !trigger2Box) {
+      throw new Error('Could not get bounding boxes')
+    }
+
+    // hover first submenu trigger to start opening
+    await page.mouse.move(
+      trigger1Box.x + trigger1Box.width / 2,
+      trigger1Box.y + trigger1Box.height / 2
+    )
+    await page.waitForTimeout(60) // just after the 100ms open delay starts
+
+    // now move down at varying speeds to try to trigger the bug
+    // the bug happens at a specific speed where submenu is animating
+    for (let i = 0; i < 5; i++) {
+      const y = trigger1Box.y + trigger1Box.height / 2 + i * 5
+      await page.mouse.move(trigger1Box.x + trigger1Box.width / 2, y)
+      await page.waitForTimeout(15)
+    }
+
+    // move to second submenu trigger
+    await page.mouse.move(
+      trigger2Box.x + trigger2Box.width / 2,
+      trigger2Box.y + trigger2Box.height / 2
+    )
+    await page.waitForTimeout(150)
+
+    // count how many items have the highlight
+    const allHighlighted = await menuContent.locator('[data-highlighted]').count()
+
+    // CRITICAL: should only be 1 highlighted item
+    expect(allHighlighted).toBeLessThanOrEqual(1)
+
+    // if trigger2 is highlighted, trigger1 should not be
+    const trigger2Highlight = await submenuTrigger2.getAttribute('data-highlighted')
+    if (trigger2Highlight === '') {
+      const trigger1Highlight = await submenuTrigger1.getAttribute('data-highlighted')
+      expect(trigger1Highlight).toBeNull()
+    }
+  })
+})

package/tests/MenuHighlight.test.tsx

@@ -0,0 +1,165 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Menu Highlight Behavior', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'MenuHighlightCase', type: 'useCase', waitExtra: true })
+  })
+
+  test('hovering an item focuses it', async ({ page }) => {
+    const trigger = page.getByTestId('menu-trigger')
+    await expect(trigger).toBeVisible()
+
+    // use keyboard to open menu (avoids overlay click interception in dev)
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // hover over item 2
+    const item2 = page.getByTestId('menu-item-2')
+    await item2.hover()
+    await page.waitForTimeout(100)
+
+    // item should be focused (not just hovered)
+    await expect(item2).toBeFocused()
+  })
+
+  test('only one item is highlighted at a time when switching mouse to keyboard', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // hover item 2 to highlight it
+    const item2 = page.getByTestId('menu-item-2')
+    await item2.hover()
+    await page.waitForTimeout(100)
+    await expect(item2).toBeFocused()
+
+    // now use keyboard to move to item 3
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(100)
+
+    const item3 = page.getByTestId('menu-item-3')
+    await expect(item3).toBeFocused()
+
+    // item 2 should no longer be focused
+    await expect(item2).not.toBeFocused()
+
+    // verify only item3 has the highlighted data attribute
+    const item2Highlighted = await item2.getAttribute('data-highlighted')
+    const item3Highlighted = await item3.getAttribute('data-highlighted')
+    expect(item2Highlighted).toBeNull()
+    expect(item3Highlighted).toBe('')
+  })
+
+  test('hover then arrow down shows only ONE highlighted item (no double highlight)', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const item1 = page.getByTestId('menu-item-1')
+    const item2 = page.getByTestId('menu-item-2')
+
+    // hover item 1 - it should get background highlight
+    await item1.hover()
+    await page.waitForTimeout(100)
+
+    const item1BgAfterHover = await item1.evaluate(
+      (el) => getComputedStyle(el).backgroundColor
+    )
+    const item2BgAfterHover = await item2.evaluate(
+      (el) => getComputedStyle(el).backgroundColor
+    )
+
+    // item1 should have highlight bg, item2 should not
+    expect(item1BgAfterHover).not.toBe(item2BgAfterHover)
+
+    // now press ArrowDown to move to item 2
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(100)
+
+    const item1BgAfterArrow = await item1.evaluate(
+      (el) => getComputedStyle(el).backgroundColor
+    )
+    const item2BgAfterArrow = await item2.evaluate(
+      (el) => getComputedStyle(el).backgroundColor
+    )
+
+    // CRITICAL: item1 should NO LONGER have highlight bg
+    // item2 should now have the highlight bg
+    // they should NOT both be highlighted
+    expect(item1BgAfterArrow).toBe(item2BgAfterHover) // item1 now has default bg
+    expect(item2BgAfterArrow).toBe(item1BgAfterHover) // item2 now has highlight bg
+  })
+
+  test('keyboard navigation then mouse hover transfers highlight cleanly', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    // keyboard opens menu and focuses first item
+    const item1 = page.getByTestId('menu-item-1')
+    await expect(item1).toBeFocused()
+
+    // navigate down with keyboard
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(100)
+    const item2 = page.getByTestId('menu-item-2')
+    await expect(item2).toBeFocused()
+
+    // now hover item 1 with mouse
+    await item1.hover()
+    await page.waitForTimeout(100)
+
+    // item 1 should now be focused, item 2 should not
+    await expect(item1).toBeFocused()
+    await expect(item2).not.toBeFocused()
+  })
+
+  test('item has consistent background on focus regardless of input method', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    const item1 = page.getByTestId('menu-item-1')
+    const item2 = page.getByTestId('menu-item-2')
+
+    // hover item 1
+    await item1.hover()
+    await page.waitForTimeout(100)
+    const item1BgOnHover = await item1.evaluate(
+      (el) => getComputedStyle(el).backgroundColor
+    )
+
+    // move to item 2 via keyboard
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(100)
+    const item2BgOnKeyboard = await item2.evaluate(
+      (el) => getComputedStyle(el).backgroundColor
+    )
+
+    // backgrounds should match (same highlight style for both input methods)
+    expect(item1BgOnHover).toBe(item2BgOnKeyboard)
+  })
+})

package/tests/MenuHoverKeyboardBugs.test.tsx

@@ -0,0 +1,252 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Menu hover/keyboard bug fixes', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'MenuAccessibilityCase', type: 'useCase' })
+  })
+
+  /**
+   * Bug 1: hoverStyle should not cause double highlighting
+   * When you hover an item and then use keyboard to navigate away WITHOUT moving the mouse,
+   * the hovered item's hoverStyle can persist alongside the keyboard-focused item's highlight,
+   * resulting in two items appearing highlighted at once.
+   *
+   * The key scenario: mouse is still over item1, but keyboard navigates to item2.
+   * Both items should NOT have highlighted background - only item2 should.
+   */
+  test('no double highlight: when keyboard navigates while mouse stays over original item', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    const item1 = page.getByTestId('menu-item-1')
+    const item2 = page.getByTestId('menu-item-2')
+
+    // get the default (non-highlighted) background color of item2
+    const defaultBg = await item2.evaluate((el) => getComputedStyle(el).backgroundColor)
+
+    // hover item 1 with mouse - it should get highlighted
+    await item1.hover()
+    await page.waitForTimeout(150)
+
+    // item1 should be focused and highlighted
+    await expect(item1).toBeFocused()
+    const item1BgAfterHover = await item1.evaluate(
+      (el) => getComputedStyle(el).backgroundColor
+    )
+
+    // item1 should have a different (highlighted) background
+    expect(item1BgAfterHover).not.toBe(defaultBg)
+
+    // now use keyboard to move to item 2
+    // CRITICAL: do NOT move the mouse - it stays over item1
+    // this is the exact scenario where hoverStyle causes double highlight
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(150)
+
+    // item2 should now be focused and highlighted
+    await expect(item2).toBeFocused()
+
+    // get backgrounds - CRITICAL TEST: only item2 should have highlight bg
+    const item1BgAfterArrow = await item1.evaluate(
+      (el) => getComputedStyle(el).backgroundColor
+    )
+    const item2BgAfterArrow = await item2.evaluate(
+      (el) => getComputedStyle(el).backgroundColor
+    )
+
+    // item2 should have highlighted bg (via data-highlighted/focusStyle)
+    expect(item2BgAfterArrow).not.toBe(defaultBg)
+
+    // CRITICAL: item1 should NOT have highlighted background even though mouse is still over it
+    // If this fails, it means hoverStyle is causing double highlight
+    expect(item1BgAfterArrow).toBe(defaultBg)
+  })
+
+  /**
+   * Bug 2: After hovering a submenu trigger (before the auto-open timer fires),
+   * pressing ArrowRight should open the submenu and focus its first item.
+   *
+   * When you hover over a submenu trigger with the mouse and IMMEDIATELY press ArrowRight
+   * (before the 100ms auto-open delay), the submenu should open and focus should move into it.
+   */
+  test('hovering submenu trigger then immediately pressing ArrowRight opens and focuses submenu', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    const submenuTrigger = page.getByTestId('submenu-trigger')
+
+    // hover the submenu trigger with mouse
+    await submenuTrigger.hover()
+    // don't wait for the auto-open timer - press arrow key immediately
+    await page.waitForTimeout(50) // just enough for the focus to happen
+
+    // the submenu trigger should be focused from the hover
+    await expect(submenuTrigger).toBeFocused()
+
+    // now press ArrowRight to open the submenu - the submenu might not be open yet
+    // because the 100ms auto-open timer hasn't fired
+    const submenuContent = page.getByTestId('submenu-content')
+
+    await page.keyboard.press('ArrowRight')
+    await page.waitForTimeout(300)
+
+    // the submenu should be open
+    await expect(submenuContent).toBeVisible({ timeout: 2000 })
+
+    // CRITICAL: the first submenu item should now be focused
+    // this is the key difference from mouse-hover behavior
+    const submenuItem1 = page.getByTestId('submenu-item-1')
+    await expect(submenuItem1).toBeFocused()
+  })
+
+  /**
+   * Bug 2b: When submenu is already open via hover, pressing ArrowRight should focus
+   * the first submenu item (moving focus into the submenu).
+   *
+   * Scenario: User hovers submenu trigger, submenu auto-opens, user presses ArrowRight
+   * expecting to move focus into the already-open submenu.
+   */
+  test('when submenu is already open via hover, ArrowRight focuses first submenu item', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    const submenuTrigger = page.getByTestId('submenu-trigger')
+
+    // hover the submenu trigger and wait for it to auto-open
+    await submenuTrigger.hover()
+    await page.waitForTimeout(200) // wait for 100ms auto-open delay
+
+    const submenuContent = page.getByTestId('submenu-content')
+    await expect(submenuContent).toBeVisible({ timeout: 2000 })
+
+    // at this point, submenu is open but trigger is still focused (from hover)
+    await expect(submenuTrigger).toBeFocused()
+
+    // pressing ArrowRight should move focus INTO the submenu
+    await page.keyboard.press('ArrowRight')
+    await page.waitForTimeout(150)
+
+    // the first submenu item should now be focused
+    const submenuItem1 = page.getByTestId('submenu-item-1')
+    await expect(submenuItem1).toBeFocused()
+  })
+
+  /**
+   * Bug 2c: When a submenu is open via mouse hover (not keyboard), pressing keyboard keys
+   * should still work to navigate within it.
+   *
+   * Scenario: User opens menu, hovers over submenu trigger (which opens submenu),
+   * then hovers over a submenu item, then tries to use keyboard to navigate.
+   */
+  test('submenu opened via hover then keyboard navigation works', async ({ page }) => {
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // hover the submenu trigger - this should open the submenu after a delay
+    const submenuTrigger = page.getByTestId('submenu-trigger')
+    await submenuTrigger.hover()
+    await page.waitForTimeout(300) // wait for the 100ms delay to open
+
+    const submenuContent = page.getByTestId('submenu-content')
+    await expect(submenuContent).toBeVisible({ timeout: 2000 })
+
+    // now hover a submenu item
+    const submenuItem1 = page.getByTestId('submenu-item-1')
+    await submenuItem1.hover()
+    await page.waitForTimeout(150)
+    await expect(submenuItem1).toBeFocused()
+
+    // now try keyboard navigation - ArrowDown should go to submenu-item-2
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(150)
+
+    const submenuItem2 = page.getByTestId('submenu-item-2')
+    await expect(submenuItem2).toBeFocused()
+
+    // ArrowLeft should close submenu and return to parent
+    await page.keyboard.press('ArrowLeft')
+    await page.waitForTimeout(300)
+
+    await expect(submenuContent).not.toBeVisible()
+    await expect(submenuTrigger).toBeFocused()
+  })
+
+  /**
+   * Bug 2c: After hovering a submenu item (inside an open submenu), pressing ArrowRight
+   * should NOT do anything weird (or should do the right thing depending on context).
+   *
+   * This tests that after the user hovers items in the submenu with their mouse,
+   * then switches to keyboard navigation, it works correctly.
+   */
+  test('hovering submenu item then using keyboard navigation works', async ({ page }) => {
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // open the submenu via keyboard first
+    const submenuTrigger = page.getByTestId('submenu-trigger')
+    await submenuTrigger.focus()
+    await page.keyboard.press('ArrowRight')
+    await page.waitForTimeout(300)
+
+    const submenuContent = page.getByTestId('submenu-content')
+    await expect(submenuContent).toBeVisible()
+
+    // now hover the first submenu item with mouse
+    const submenuItem1 = page.getByTestId('submenu-item-1')
+    await submenuItem1.hover()
+    await page.waitForTimeout(150)
+    await expect(submenuItem1).toBeFocused()
+
+    // hover the second submenu item
+    const submenuItem2 = page.getByTestId('submenu-item-2')
+    await submenuItem2.hover()
+    await page.waitForTimeout(150)
+    await expect(submenuItem2).toBeFocused()
+
+    // now use keyboard to navigate back up
+    await page.keyboard.press('ArrowUp')
+    await page.waitForTimeout(150)
+
+    // the first item should now be focused (keyboard navigation should work)
+    await expect(submenuItem1).toBeFocused()
+
+    // pressing ArrowLeft should close the submenu and return focus to the trigger
+    await page.keyboard.press('ArrowLeft')
+    await page.waitForTimeout(300)
+
+    await expect(submenuContent).not.toBeVisible()
+    await expect(submenuTrigger).toBeFocused()
+  })
+})

package/tests/MenuItemFocus.test.tsx

@@ -0,0 +1,59 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Menu Item Focus Preservation', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'MenuItemFocusCase', type: 'useCase' })
+  })
+
+  test('menu item that focuses a new element keeps focus on that element', async ({
+    page,
+  }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // click the item that shows and focuses an input
+    const focusInputItem = page.getByTestId('focus-input-item')
+    await focusInputItem.click()
+    await page.waitForTimeout(300)
+
+    // menu should be closed
+    await expect(menuContent).not.toBeVisible()
+
+    // the dynamic input should be focused, NOT the trigger
+    const dynamicInput = page.getByTestId('dynamic-input')
+    await expect(dynamicInput).toBeVisible()
+    await expect(dynamicInput).toBeFocused()
+  })
+
+  test('menu item that focuses existing element keeps focus on that element', async ({
+    page,
+  }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // click the item that focuses the always-visible input
+    const focusExistingItem = page.getByTestId('focus-existing-item')
+    await focusExistingItem.click()
+    await page.waitForTimeout(300)
+
+    // menu should be closed
+    await expect(menuContent).not.toBeVisible()
+
+    // the always-visible input should be focused, NOT the trigger
+    const alwaysVisibleInput = page.getByTestId('always-visible-input')
+    await expect(alwaysVisibleInput).toBeFocused()
+  })
+})