Error: Tried to dipatch event without element

[pboguslawski]

Describe the bug

When split buttons using a button group are wrapped with #key to re-render whole stuff on lang change like in kaisermann/svelte-i18n#224, re-rendring throws an error on browser console on #key change.

SMUI packages version: 7.0.0-beta.16

To Reproduce
Steps to reproduce the behavior:

1. Create component test.svelte

<script lang="ts">
	import { locale, locales } from '$lib/stores';
	import Button, { Label } from '@smui/button';
	import Menu from '@smui/menu';
	import List, { Item, Text } from '@smui/list';

	$locale = 'pl';
	let menuLanguage: Menu;
</script>

{#key $locale}
	<Button on:click={() => menuLanguage.setOpen(true)}>
		<Label>{$locale}</Label>
	</Button>
	<Menu bind:this={menuLanguage}>
		<List>
			{#each $locales as l}
				<Item
					on:SMUI:action={() => {
						$locale = l;
					}}
				>
					<Text>{l}</Text>
				</Item>
			{/each}
		</List>
	</Menu>
	<div>
		<slot />
	</div>
{/key}

2. Create stores.ts

export const locale = writable<string | undefined>(undefined);
export const locales = writable<string[]>(['pl', 'en']);

3. Click button and choose different locale (try 2-3 times).
4. See error in browser console

Uncaught Error: Tried to dipatch event without element.
    dispatch dispatch.ts:13
    notifyClose MenuSurface.svelte:118
    closeAnimationEndTimerId foundation.ts:302
    setTimeout handler*MDCMenuSurfaceFoundation2.prototype.close/< foundation.ts:298
    close foundation.ts:294
    closeProgrammatic MenuSurface.svelte:234
    closeSurface Menu.svelte:57
    destroy foundation.ts:80
    instance_12 Menu.svelte:85
    run utils.js:41
    run_all utils.js:53
    destroy_component Component.js:68
    destroy Page.svelte:1605
    destroy_component Component.js:69
    destroy DashboardPage.svelte:138
    destroy_component Component.js:69
    destroy +page.svelte:48
    destroy_component Component.js:69
    destroy root.svelte:320
    destroy +layout.svelte:360
    transition_out transitions.js:88
    run utils.js:41
    run_all utils.js:53
    check_outros transitions.js:57
    update +layout.svelte:483
    update scheduler.js:119
    flush scheduler.js:79
    promise callback*schedule_update scheduler.js:20
    make_dirty Component.js:81
    ctx Component.js:139
    instance +layout.svelte:545
    set index.js:56

Clicking MenuSurface.svelte:118 in console gives:

[...]
		m: function mount(target, anchor) {
			insert_hydration_dev(target, t, anchor);
			insert_hydration_dev(target, div, anchor);

			if (default_slot) {
				default_slot.m(div, null);
			}

>>>>			/*div_binding*/ ctx[35](div);
			current = true;

			if (!mounted) {
				dispose = [
					listen_dev(document_1.body, "click", /*handleBodyClick*/ ctx[11], true, false, false, false),
					action_destroyer(useActions_action = useActions.call(null, div, /*use*/ ctx[0])),
					action_destroyer(forwardEvents_action = /*forwardEvents*/ ctx[10].call(null, div)),
					listen_dev(
						div,
						"keydown",
						function () {
							if (is_function(/*instance*/ ctx[7] && /*instance*/ ctx[7].handleKeydown.bind(/*instance*/ ctx[7]))) (/*instance*/ ctx[7] && /*instance*/ ctx[7].handleKeydown.bind(/*instance*/ ctx[7])).apply(this, arguments);
						},
						false,
						false,
						false,
						false
					)
				];

				mounted = true;
			}
		},
[...]

Expected behavior
No error on browser console.

Desktop (please complete the following information):

• OS: Linux
• Browser Firefox
• Version 115