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 https://github.com/kaisermann/svelte-i18n/issues/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)}>

{$locale}

</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 handlerMDCMenuSurfaceFoundation2.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 callbackschedule_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