search

TheComputerM / svelte-materialify

A Material UI Design Component library for Svelte heavily inspired by vuetify.
https://svelte-materialify.vercel.app
MIT License
622 stars 83 forks source link

fix(ListGroup): offset not applied when toggling off and on quickly #260

Closed V-ed closed 3 years ago

V-ed commented 3 years ago

Closes #75 To get a gist of the issue at hand, if you go at https://svelte-materialify.vercel.app/components/lists/#nested and toggle on the nested ListGroup element, everything looks fine. However, if you now double click the Actions element (basically closing and opening the nested ListGroup element), you will see that the offset is not applied anymore.

I believe this is due to a weird interaction with Svelte where the transition is applied the the use:Style directive doesn't get applied when the element isn't fully removed yet (due to the transition). I tested it locally and couldn't find a proper fix.

However, since the use directive of the Style function is updateable, if you reactively update the offset variable, the use directive gets reapplied every time you toggle the ListGroup, which fixes this issue.

I do not exactly like this fix, as it does bring more overhead for even regular toggles (which didn't have this issue) and therefore runs more code than before, but the lack of offset on double click is, IMO, a more annoying issue than trying to fix Svelte currently. Besides, once Svelterial comes out, maybe this issue won't be there anymore - but this should be addressed for Svelte-Materialify as svelterial isn't out yet.

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/thecomputerm/svelte-materialify/6U1J5wLC4dXRoCfQ8ud9BwAU8XHa
✅ Preview: https://svelte-materialify-git-fork-v-ed-patch-3-thecomputerm.vercel.app

V-ed commented 3 years ago

Until this is merged, a quick fix would be to manually add style="--s-list-group-offset: 72px;" to the element / any parent element (with the 72 here being the same offset given to the ListGroup element).

This essentially forces the offset, and doesn't get removed by the svelte transition logic.

Florian-Schoenherr commented 3 years ago

We had this problem listed in some issue before, I think it was even one of mine 😄