Close a menu whose trigger a breakpoint hides instead of leaving it open
An app bar's overflow menu is two separate <x-menu> 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 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
c214745132
commit
bd2bb07106
@@ -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')
|
||||
|
||||
|
||||
Reference in New Issue
Block a user