mskocik / svelecte

Flexible autocomplete/select component written in Svelte,
https://svelecte.vercel.app
MIT License
472 stars 44 forks source link

add customDispatch, to pass target element to event #217

Closed nosovk closed 9 months ago

nosovk commented 9 months ago

Problem: there is no ref to select in on:change event, due to that there is no option to get target element id. This comes due to limitation of standard dispatch method, added one based on https://stackoverflow.com/questions/66982839/is-it-possible-to-dispatch-a-svelte-custom-event-with-a-target-object In that case we can check target inside on:change event

mskocik commented 9 months ago

And what exactly do you need to do with <select> itself?

nosovk commented 9 months ago

I need to have access to name or id property of a select element, to identify on which select there was an update. For example - I have 10 selects, I would like to tracked which of them were touched. I'm adding on:change={markTouched}, that saves touched[selectName]=true, where touched is an array of names that exist on a form.

mskocik commented 9 months ago

Hmm... wanted to show you it's possible even now, but something is failing... maybe some bug. Will dig into it. In general I would like to avoid using svelte's internals, so let me investigate it further.

nosovk commented 9 months ago

Super! Currently, I've made some hack, like passing select name to the value object, and it's not blocking me now. It would be nice to have some normal workaround, but currently it's not blocking anything.

mskocik commented 9 months ago

Okay, I as thought - it works correctly in svelecte@next. For 3.* version I pushed fix, where it works now.

Basically what you want is to set change listener on wrapping element with { capture: true}. Look at this REPL

Don't forget that Svelecte must have name attribute set.

Test it and let me know or close this PR directly.

nosovk commented 9 months ago

I've didn't knew about existence of svelecte@next, but an example with {capture: true} helped me. Actually my fault, have forgotten the basis. Now everything works correctly by setting change handler on top of wrapper elements within capture:true. I'm very appreciated for yours help, big thanks!

mskocik commented 9 months ago

svelecte@next supports also svelte 4. Basically it marks svelte as peer dependency. That's the only difference for now. But new reworked / updated version is in (slow) development. I would like to release it before svelte 5 is out 🤞