headless menu is not compatible with teleport

[Ahrengot]

The following structure will throw, when trying to select the menu items with keyboard (arrow up/down)

cdn.min.js:5 Uncaught TypeError: Cannot read properties of undefined (reading '_x_dataStack')

<div x-data x-menu>
    <button x-menu:button>Options</button>
    
    <template x-teleport="body">
        <div x-menu:items>
            <a x-menu:item>Edit</a>
            <a x-menu:item>Copy</a>
        </div>
    </template>
</div>

The error is triggered by this keyboard listener https://github.com/alpinejs/alpine/blob/main/packages/ui/src/menu.js#L101 and happens in https://github.com/alpinejs/alpine/blob/main/packages/ui/src/menu.js#L177 because the parent argument is undefined.

I created a code sandbox to demonstrate. It copies the example markup from https://alpinejs.dev/component/headless-menu and wraps the menu items in a template:
https://codesandbox.io/p/sandbox/alpine-menu-4cg7t5?file=%2Findex.html%3A31%2C5-87%2C11

let me know if there's anything else I can provide 😄

[Ahrengot]

I added a failing test here: #4031

[Ahrengot]

Fixed in #d17b248