Popover Auto Demo

Testing popover="auto" behavior with nested dropdown menus. No React state - browser controls everything.

Nested Dropdown Menus

Open the menu, then open submenus. Press Escape - it should only close the topmost menu. Click outside to close all menus (light dismiss).

File (Level 1)
Share (Level 2)
Social (Level 3)

Expected Behaviors

Light Dismiss

  • Click outside closes ALL open popovers
  • This is expected behavior per spec

Escape Key

  • Should close only the TOPMOST popover
  • Requires proper DOM nesting
  • Child popover must be inside parent popover
DOM Structure: For nested popovers to work correctly, the child popover element must be a DOM descendant of the parent popover element. This demo renders child menus inside parent menus to achieve this.