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')