fix(dropdownmenu): Make submenu dismissable (#94740)

Author: scttcper

static/app/components/dropdownMenu/index.spec.tsx

@@ -132,6 +132,7 @@ describe('DropdownMenu', function () {
 
   it('renders submenus', async function () {
     const onAction = jest.fn();
+    const onOpenChange = jest.fn();
 
     render(
       <DropdownMenu
@@ -154,10 +155,12 @@ describe('DropdownMenu', function () {
           },
         ]}
         triggerLabel="Menu"
+        onOpenChange={onOpenChange}
       />
     );
 
     await userEvent.click(screen.getByRole('button', {name: 'Menu'}));
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
 
     // Sub item won't be visible until we hover over its parent
     expect(
@@ -190,26 +193,31 @@ describe('DropdownMenu', function () {
     expect(onAction).toHaveBeenCalled();
 
     // Entire menu system is closed
+    expect(onOpenChange).toHaveBeenCalledTimes(2);
     expect(screen.getByRole('button', {name: 'Menu'})).toHaveAttribute(
       'aria-expanded',
       'false'
     );
 
     // Pressing Esc closes the entire menu system
     await userEvent.click(screen.getByRole('button', {name: 'Menu'}));
+    expect(onOpenChange).toHaveBeenCalledTimes(3);
     await userEvent.hover(screen.getByRole('menuitemradio', {name: 'Item'}));
     await userEvent.hover(screen.getByRole('menuitemradio', {name: 'Sub Item'}));
     await userEvent.keyboard('{Escape}');
+    expect(onOpenChange).toHaveBeenCalledTimes(4);
     expect(screen.getByRole('button', {name: 'Menu'})).toHaveAttribute(
       'aria-expanded',
       'false'
     );
 
     // Clicking outside closes the entire menu system
     await userEvent.click(screen.getByRole('button', {name: 'Menu'}));
+    expect(onOpenChange).toHaveBeenCalledTimes(5);
     await userEvent.hover(screen.getByRole('menuitemradio', {name: 'Item'}));
     await userEvent.hover(screen.getByRole('menuitemradio', {name: 'Sub Item'}));
     await userEvent.click(document.body);
+    expect(onOpenChange).toHaveBeenCalledTimes(6);
     expect(screen.getByRole('button', {name: 'Menu'})).toHaveAttribute(
       'aria-expanded',
       'false'

static/app/components/dropdownMenu/list.tsx

@@ -184,9 +184,7 @@ function DropdownMenuList({
         onClose={onClose}
         closeOnSelect={closeOnSelect}
         menuTitle={node.value.submenuTitle}
-        isDismissable={false}
         shouldCloseOnBlur={false}
-        shouldCloseOnInteractOutside={() => false}
         preventOverflowOptions={{boundary: document.body, altAxis: true}}
         renderWrapAs="li"
         position="right-start"