search

hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.28k stars 288 forks source link

Crash when unmounting @smui/select with helperText #544

Open emarj opened 1 year ago

emarj commented 1 year ago

I am not sure if this is a bug or not, since I cannot really reproduce it outside of my codebase (which is always a red flag). But since it crashes the whole app and the error trace is quite deep in SMUI components, I thought that by posting it here maybe someone can understand what is going on.

The Problem As soon as I use @smui/select and I set an helperText, for example like:

<Select variant="outlined" bind:value {label}>
       {#each entities as entity (entity.id)}
           <Option value={entity.id}>{entity.name}</Option>
       {/each}
       <svelte:fragment slot="helperText">Helper text.</svelte:fragment>
</Select>

The component renders fine but as soon as I unmount it (by navigating to another view for example), the app crashes with the following error.

Error Trace ``` Uncaught (in promise) TypeError: element2.getElement is not a function getElement List.svelte:335 get element List.svelte:172 clone (index):561 clone (index):555 clone (index):555 serializeNode (index):656 remove (index):681 remove (index):21 removeNode (index):122 d (index):280 destroy @smui_select.js:8832 updateProfile (index):49 d (index):283 destroy_component index.mjs:1955 destroy EntitySelect.svelte:107 updateProfile (index):49 d (index):283 destroy EntitySelect.svelte:494 updateProfile (index):49 d (index):283 destroy_component index.mjs:1955 destroy EntitySwitcher.svelte:78 updateProfile (index):49 d (index):283 destroy_component index.mjs:1955 destroy App.svelte:75 updateProfile (index):49 d (index):283 transition_out index.mjs:1241 run index.mjs:18 run_all index.mjs:24 check_outros index.mjs:1222 update App.svelte:129 updateProfile (index):49 p (index):266 update_slot_base index.mjs:98 update @sveltestack_svelte-query.js:2478 updateProfile (index):49 p (index):266 update index.mjs:1193 flush index.mjs:1160 promise callback*schedule_update index.mjs:1118 make_dirty index.mjs:1965 ctx index.mjs:2003 list_1_selectedIndex_binding @smui_select.js:9165 list_1_selectedIndex_binding @smui_select.js:8056 ctx index.mjs:2001 notifyAction @smui_select.js:5180 handleClick foundation.ts:507 handleClick List.svelte:240 listen index.mjs:415 $on forwardEventsBuilder.ts:136 forwardEventsBuilder forwardEventsBuilder.ts:157 mount chunk-J2EM3KCS.js:553 updateProfile (index):49 m (index):253 mount chunk-J2EM3KCS.js:410 updateProfile (index):49 m (index):253 mount chunk-J2EM3KCS.js:691 updateProfile (index):49 m (index):253 mount_component index.mjs:1930 mount @smui_select.js:4974 updateProfile (index):49 m (index):253 mount_component index.mjs:1930 mount @smui_select.js:8076 updateProfile (index):49 m (index):253 mount @smui_select.js:4437 updateProfile (index):49 m (index):253 mount @smui_select.js:3694 updateProfile (index):49 m (index):253 mount_component index.mjs:1930 mount @smui_select.js:4522 updateProfile (index):49 m (index):253 List.svelte:335:19 remove (index):21 removeNode (index):122 d (index):280 destroy @smui_select.js:8832 updateProfile (index):49 d (index):283 destroy_component index.mjs:1955 destroy EntitySelect.svelte:107 updateProfile (index):49 d (index):283 destroy EntitySelect.svelte:494 updateProfile (index):49 d (index):283 destroy_component index.mjs:1955 destroy EntitySwitcher.svelte:78 updateProfile (index):49 d (index):283 destroy_component index.mjs:1955 destroy App.svelte:75 updateProfile (index):49 d (index):283 transition_out index.mjs:1241 run index.mjs:18 forEach self-hosted:203 run_all index.mjs:24 check_outros index.mjs:1222 update App.svelte:129 updateProfile (index):49 p (index):266 update_slot_base index.mjs:98 update @sveltestack_svelte-query.js:2478 updateProfile (index):49 p (index):266 update index.mjs:1193 flush index.mjs:1160 (Async: promise callback) schedule_update index.mjs:1118 make_dirty index.mjs:1965 ctx index.mjs:2003 list_1_selectedIndex_binding @smui_select.js:9165 list_1_selectedIndex_binding @smui_select.js:8056 ctx index.mjs:2001 notifyAction @smui_select.js:5180 handleClick foundation.ts:507 handleClick List.svelte:240 (Async: EventListener.handleEvent) listen index.mjs:415 $on forwardEventsBuilder.ts:136 forwardEventsBuilder forwardEventsBuilder.ts:157 mount chunk-J2EM3KCS.js:553 updateProfile (index):49 m (index):253 mount chunk-J2EM3KCS.js:410 updateProfile (index):49 m (index):253 mount chunk-J2EM3KCS.js:691 updateProfile (index):49 m (index):253 mount_component index.mjs:1930 mount @smui_select.js:4974 updateProfile (index):49 m (index):253 mount_component index.mjs:1930 mount @smui_select.js:8076 updateProfile (index):49 m (index):253 mount @smui_select.js:4437 updateProfile (index):49 m (index):253 mount @smui_select.js:3694 updateProfile (index):49 m (index):253 mount_component index.mjs:1930 mount @smui_select.js:4522 updateProfile (index):49 m (index):253 ```

If I remove the line

<svelte:fragment slot="helperText">Helper text.</svelte:fragment>

everything works as expected.

Can someone point me in the right direction?