rob-balfre / svelte-select

Svelte Select. A select component for Svelte
https://svelte-select-examples.vercel.app
Other
1.28k stars 186 forks source link

on:select should not trigger when value is set, but rather when value changes #396

Closed in0ni closed 2 years ago

in0ni commented 2 years ago

Hello, first of all thanks for your work on this component!

I am using this component for navigation, and have found that if value is set on:select is fired. This means that each time this component loads, it fires and causes it to navigate. On the same page the router is smart enough to know not to do anything, but on sub pages, it navigates a way and back to the parent page.

I have solved the issue, temporarily with the following if statement... but have a feeling it might not work down the road. if (event.detail.id && event.explicitOriginalTarget !== null) { // navigate here }

The behavior, should be that on:select should be fired only when a selection is made by the user, not when a value is set via the component properties, no?

andreasnuesslein commented 2 years ago

have the same issue / situation. cheers

btw, this does not seem to work for me:

if (event.detail.id && event.explicitOriginalTarget !== null) { // navigate here }

in0ni commented 2 years ago

Yup... that solution will not work. I am setting a store to hold the current value, and check against that. Here is an example:

  const changeRoute = function (event) {
    const val = event.detail.value;
    if (val && val !== $currentSelection) {
      // your logic here
    }
  };
rob-balfre commented 2 years ago

Fixed in v5.0.0-beta.10

Also added on:change event https://svelte.dev/repl/a8597db97f394c68a2e95d9fc2e2fc2b?version=3.47.0

andreasnuesslein commented 2 years ago

hey cool thank you :)

nitpicking but wouldn't "clearing" also imply a change event? I know there is an extra on:clear for that though.

rob-balfre commented 2 years ago

@andreasnuesslein thanks.

Fixed in v5.0.0-beta.11

in0ni commented 2 years ago

I am testing and switching to v5 -- great work!

Though I am finding that the on:change event is still being triggered when an initial value is set :/ A page load causes the event to fire. I am using the component for two different selects, again for navigation. Only one fires the change event when loading, both have reactive items that take time to load. The only difference I can tell between the two, is the one that fires the event has both optionIdentifier and labelIdentifier set.

Let me know if there is any way I can help debug. Otherwise v5 works great!

One minor comment... initially the clear button broke things for me as event.detail no longer exists. A simple event.detail?.id fixed this issue, but wondering if detail should still exist? A minor comment.

andreasnuesslein commented 2 years ago

I do still have the same issue as well with 5.0.0-beta.11

rob-balfre commented 2 years ago

All seems to be working fine now. Gonna close this.

REPL https://svelte.dev/repl/ee631c9a2c8b4aa085f87e04149aa41b?version=3.49.0

Reopen with a REPL example if I've missed something please.

Thanks

andreasnuesslein commented 2 years ago

have not checked yet, but thanks :)