search

htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.9k stars 309 forks source link

Dropdown doesn't work after hot reload in SvelteKit #437

Closed rstcruzo closed 1 month ago

rstcruzo commented 3 months ago

Summary

When you edit a dropdown and hot reload triggers, the dropdown does not work anymore

Steps to Reproduce

  1. Go to the example in the documentation https://stackblitz.com/edit/preline-v2-svelte-btpdf2?file=src%2Fcomponents%2FDropdownItem.svelte
  2. Change a dropdown item. For instance, rename Newsletter to Edited
  3. Try to click the dropdown again

Demo Link

https://stackblitz.com/edit/preline-v2-svelte-btpdf2?file=src%2Fcomponents%2FDropdownItem.svelte

Expected Behavior

The dropdown should still work after hot reloading

Actual Behavior

The dropdown does not work anymore

Screenshots

No response

langscot commented 3 months ago

Whilst Preline claims to be framework agnostic, I still think there’s a reasonable expectation for it to support common tooling.

I use React + Vite and haven’t noticed any issues with HMR, so could be something specific to SvelteKit.

I suspect the event listeners bound to the dropdown toggle are lost during the hot reload. I will have a look at this tonight for a quick workaround.

oliverhaas commented 3 months ago

It probably does not get properly initialized again. I guess Svelte HMR does not fully reload the page.

Just to test it you can add

<script>
  HSDropdown.autoInit();
</script>

to your html. I wouldn't even call it a hacky solution though. See other issues regarding ajax and (re-)initialization; I think there are quite some flaws in preline regarding this.