From bd2bb07106f5e11934885b2a32811a386e9913cd Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Tue, 15 Sep 2026 01:37:03 +0200 Subject: [PATCH] Close a menu whose trigger a breakpoint hides instead of leaving it open An app bar's overflow menu is two separate instances trading places as the width crosses 600px, each display: none where the other shows. Resizing away from a menu's trigger left its popover in an open state forever, anchored to a wrapper nobody could see or reach anymore. A ResizeObserver on the trigger now closes the menu once it has no box left to render (plan step 36, navigation group). Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/js/menu.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/resources/js/menu.js b/resources/js/menu.js index b6144882..47a9c79c 100644 --- a/resources/js/menu.js +++ b/resources/js/menu.js @@ -141,6 +141,18 @@ const menu = () => ({ } }) + // A breakpoint can hide a trigger out from under an open menu — two overflow menus in an + // app bar trading places as the width crosses 600px, one per width, each display: none + // where the other shows. Left alone the popover stays open, anchored to nothing. + const hides = new ResizeObserver(() => { + if (this.isOpen() && this.$refs.trigger.getClientRects().length === 0) { + this.close() + } + }) + + hides.observe(this.$refs.trigger) + this.listeners.push(() => hides.disconnect()) + if (this.$el.hasAttribute('data-md-sheet-at-compact')) { this.compact = upTo('medium')