Close menu recover active element

Author: mantou132

src/elements/menu.ts

@@ -7,32 +7,35 @@ export interface MenuItem {
 }
 
 type MenuState = {
+  activeElement: HTMLElement | null;
   open: boolean;
   menus: MenuItem[];
   x: number;
   y: number;
 };
 
 export const menuStore = createStore<MenuState>({
+  activeElement: null,
   open: false,
   menus: [],
   x: 0,
   y: 0,
 });
 
-export function openMenu(x: number, y: number, menus: MenuItem[]) {
-  updateStore(menuStore, { open: true, x, y, menus });
+export function openMenu(activeElement: HTMLElement | null, x: number, y: number, menus: MenuItem[]) {
+  updateStore(menuStore, { open: true, x, y, menus, activeElement });
 }
 
-export function closeMenu() {
+export function pointerDownHandle() {
+  setTimeout(() => menuStore.activeElement?.focus());
   updateStore(menuStore, { open: false });
 }
 
 @customElement('gem-panel-menu')
 @connectStore(menuStore)
 export class GemPanelMenuElement extends GemElement {
   mounted = () => {
-    this.addEventListener('click', closeMenu);
+    this.addEventListener('pointerdown', pointerDownHandle);
   };
 
   render = () => {
@@ -84,7 +87,7 @@ export class GemPanelMenuElement extends GemElement {
       </style>
       <div part="menu" class="menu">
         ${menuStore.menus.map(
-          ({ text, handle }) => html`<div part="menu-item" class="item" @click=${handle}>${text}</div>`,
+          ({ text, handle }) => html`<div part="menu-item" class="item" @pointerdown=${handle}>${text}</div>`,
         )}
       </div>
     `;

src/elements/panel-title.ts

@@ -9,7 +9,8 @@ export class GemPanelTitleElement extends GemElement {
   window: Window;
   panel: Panel;
 
-  #clickHandle = (evt: MouseEvent) => {
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=1206640
+  #pointerDownHandle = (evt: MouseEvent) => {
     evt.stopPropagation();
     const { window, panel } = this;
     const defaultMenus = [
@@ -22,7 +23,13 @@ export class GemPanelTitleElement extends GemElement {
         handle: () => closeWindow({ window }),
       },
     ];
-    openMenu(evt.x, evt.y, [...(store.openPanelMenuBefore?.(panel, window) || []), ...defaultMenus]);
+    setTimeout(() => {
+      const activeElement = (this.getRootNode() as ShadowRoot)?.activeElement;
+      openMenu(activeElement as HTMLElement, evt.x, evt.y, [
+        ...(store.openPanelMenuBefore?.(panel, window) || []),
+        ...defaultMenus,
+      ]);
+    });
   };
 
   render = () => {
@@ -73,7 +80,7 @@ export class GemPanelTitleElement extends GemElement {
         }
       </style>
       <slot></slot>
-      <span part="panel-button" class="panel-button" @pointerdown=${this.#clickHandle}></span>
+      <span part="panel-button" class="panel-button" @pointerdown=${this.#pointerDownHandle}></span>
     `;
   };
 }

src/elements/root.ts

@@ -184,7 +184,6 @@ export class GemPanelElement extends GemElement {
                 panel-button,
                 panel-loader
               "
-              .fixed=${!window.isGridWindow()}
               .window=${window}
             ></gem-panel-window>
           `,

src/elements/window.ts

@@ -281,8 +281,6 @@ export class GemPanelWindowElement extends GemElement<State> {
           z-index: 1;
           height: 0;
           flex-grow: 1;
-          display: flex;
-          flex-direction: column;
         }
         :is(.window, .content):is(:focus, :focus-visible) {
           outline: none;