Hiding MDB form elements with if/else blocks throws an error

[davidb-wz]

Issue Try to hide some form elements like MDBInput or MDBBtn with Svelte if/else condition and this error appears in the developer console : Uncaught (in promise) in mdbsvelte.es.js

Reproduce In App.svelte :

<script>
	import { MDBBtn }from "mdbsvelte"
	let action = "show";
</script>

{#if action === "show"}
	<MDBBtn on:click="{() => action = 'hide'}">Hide this button</MDBBtn>
{/if}

Then npm run dev and check the developer console when clicking the button Tested in firefox 86 and Google Chrome 88

[atsepkov]

I'm seeing the same error when trying to build an accordion element. The element expands correctly, but trying to shrink it again, I see the following error:

mdbsvelte.es.js:formatted:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'c')
    at gt (mdbsvelte.es.js:formatted:1)
    at Object.o (mdbsvelte.es.js:formatted:1)
    at transition_out (mdbsvelte.es.js:formatted:1)
    at Object.outro [as o] (mdbsvelte.es.js:formatted:1)
    at transition_out (mdbsvelte.es.js:formatted:1)
    at Object.update [as p] (mdbsvelte.es.js:formatted:1)
    at update (mdbsvelte.es.js:formatted:1)
    at flush (mdbsvelte.es.js:formatted:1)

Were you able to find a workaround?

[rfrankspk]

I am seeing this issue as well... Did anyone find a work around or the proper way to accomplish this?

[atsepkov]

Ended up using a different UI library, this one does not seem to be maintained anymore.

[granitrocky]

I'm running into the same issue with an {#each} block inside and MDBContainer. It looks related to the props that are getting forwarded to Svelte and related functions being run before Svelte can find the component.

Looks like I wasted a day trying to use a dead project. Oh well.