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

[in0ni]

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]

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]

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]

Fixed in v5.0.0-beta.10

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

[andreasnuesslein]

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]

@andreasnuesslein thanks.

Fixed in v5.0.0-beta.11

[in0ni]

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]

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

[rob-balfre]

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]

have not checked yet, but thanks :)