Keep open menus and rich tooltips open through a Livewire render

<x-menu>, <x-fab-menu> and <x-rich-tooltip> gave their popover an id
that is new with every render, and Livewire's morph matches an element
without a wire:key by its id. So every render of the component around
them swapped the popover for a closed copy: an open menu closed, its
listeners stayed behind on the old element (Escape or a press outside
then left aria-expanded="true" on the trigger and focus unreturned), a
keep-open item's wire:click closed its menu when the response came, and
a rich tooltip went on showing the detached bubble, so it never opened
again. <x-carousel>'s row had the same kind of id: after a render it
scrolled without its listeners, and its items stopped re-masking.

The popover, the bubble and the row now carry a wire:key, so the morph
patches them in place and changes the id and anchor name together with
the trigger's, as it already did for everything else. The key goes
through an attribute bag: Livewire compiles a wire:key written in a
template into the key of the loop iteration around it, which would have
given every child component after the menu in a row the same key.

A morph also removes the menu button's ARIA attributes, which only
script writes. menu.js now writes them again after every morph, so the
button of a menu that stays open, and a FAB menu's close look, still
say it is open, and aria-controls names the popover's new id.

A second press on an open menu's button opened it again, render or not:
the popover closes on the press, and the guard against the click that
follows was timed from the toggle event, which is queued and arrives
after that click. It is timed from beforetoggle now.

Browser tests with Livewire probes in Chromium, Firefox and WebKit, and
a render test for the keys and the keys of the child components after.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2

resources/js/menu.js

@@ -3,7 +3,8 @@
  *
  * The menu button is the trigger's first button or link. Its ARIA attributes are written by
  * script, which a Livewire morph removes along with anything else the server did not render,
- * so they are written again whenever the trigger is used.
+ * so they are written again whenever the trigger is used and after every morph — an open menu
+ * lives through one (the popover is keyed), and its button must still say so.
  *
  * The popover hangs on the menu button by CSS anchor positioning. The server can only name the
  * wrapper around the trigger slot, and a trigger taken out of the flow — a `position: fixed` FAB
@@ -15,7 +16,9 @@
 const ITEMS = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]'
 
 // A popover="auto" closes on the press that lands on its trigger, and the click that follows
-// would open it again. A close this recent is taken as that press.
+// would open it again. A close this recent is taken as that press. It is timed from
+// `beforetoggle`, which fires as the popover closes: `toggle` is queued, and arrives after that
+// click.
 const REOPEN_GUARD_MS = 250
 
 document.addEventListener('alpine:init', () => {
@@ -33,10 +36,21 @@ document.addEventListener('alpine:init', () => {
             this.anchor()
 
             // A morph rewrites the wrapper's style with this render's name and the button's without
-            // it; the observer runs before the next frame is drawn, so an open menu never moves.
-            const observer = new MutationObserver(() => this.anchor())
+            // it, takes the button's ARIA attributes away and gives the popover a new id; the
+            // observer runs before the next frame is drawn, so an open menu never moves and its
+            // button never shows it shut.
+            const observer = new MutationObserver(() => {
+                this.anchor()
+                this.label()
+            })
 
-            observer.observe(this.$refs.trigger, { attributes: true, attributeFilter: ['style'], childList: true, subtree: true })
+            observer.observe(this.$refs.trigger, {
+                attributes: true,
+                attributeFilter: ['style', 'aria-haspopup', 'aria-controls', 'aria-expanded'],
+                childList: true,
+                subtree: true,
+            })
+            observer.observe(menu, { attributes: true, attributeFilter: ['id'] })
             this.listeners.push(() => observer.disconnect())
 
             // Only closes the browser starts — Escape, a press outside — arrive here alone; open()
@@ -48,6 +62,10 @@ document.addEventListener('alpine:init', () => {
             // that was a focusable region around the trigger).
             this.listen(menu, 'beforetoggle', (event) => {
                 this.focusWasInside = event.newState === 'closed' && menu.contains(document.activeElement)
+
+                if (event.newState === 'closed') {
+                    this.closedAt = performance.now()
+                }
             })
 
             this.listen(menu, 'toggle', (event) => {
@@ -59,8 +77,6 @@ document.addEventListener('alpine:init', () => {
                     return
                 }
 
-                this.closedAt = performance.now()
-
                 if (this.returnFocus && (this.focusWasInside || menu.contains(document.activeElement))) {
                     this.control()?.focus()
                 }
@@ -83,7 +99,7 @@ document.addEventListener('alpine:init', () => {
         /**
          * Moves the anchor name the server gave the wrapper onto the menu button. The wrapper holds a
          * name only as rendered — this render's, which the popover's `position-anchor` matches — so
-         * it is read there, never from the popover, which a morph may still be replacing.
+         * it is read there.
          */
         anchor() {
             const trigger = this.$refs.trigger
@@ -113,6 +129,7 @@ document.addEventListener('alpine:init', () => {
             }
         },
 
+        /** Writes only what differs: the observer that calls this watches these same attributes. */
         label() {
             const control = this.control()
 
@@ -120,9 +137,13 @@ document.addEventListener('alpine:init', () => {
                 return
             }
 
-            control.setAttribute('aria-haspopup', 'menu')
-            control.setAttribute('aria-controls', this.$refs.menu.id)
-            control.setAttribute('aria-expanded', String(this.isOpen()))
+            const attributes = { 'aria-haspopup': 'menu', 'aria-controls': this.$refs.menu.id, 'aria-expanded': String(this.isOpen()) }
+
+            for (const [name, value] of Object.entries(attributes)) {
+                if (control.getAttribute(name) !== value) {
+                    control.setAttribute(name, value)
+                }
+            }
         },
 
         isOpen() {