Select initial value

[AndreasRavn]

Describe the bug

In alpha.4 setting value on the wa-select doesn't seem to set initial value.

To Reproduce

<wa-select value="option-1 option-2" multiple clearable>
  <wa-option value="option-1">Option 1</wa-option>
  <wa-option value="option-2">Option 2</wa-option>
  <wa-option value="option-3">Option 3</wa-option>
  <wa-option value="option-4">Option 4</wa-option>
</wa-select>

Demo

https://backers.webawesome.com/docs/components/select#setting-initial-values
Example on documentation page works (maybe because its SSR?), but the editable example on codepen doesn't.

Screenshots

Browser / OS

• OS: MacOS 15.0
• Browser: Chrome, Edge, Safari
• Browser version: Latest stable

[KonnorRogers]

Thanks for the report, let me take a look and see whats up.

[HovKlan-DH]

When this is even affecting the examples in the documentation, then I am wondering why this has not been caught in the testing process? 🤔

[KonnorRogers]

When this is even affecting the examples in the documentation, then I am wondering why this has not been caught in the testing process? 🤔

im not sure i follow. This issue is a race condition that is largely dependent on timing of connection of elements and a few other factors, so its pretty challenging to reproduce.

The examples worked fine on the actual documentation page.

As for the bug itself, I fixed it, added regression tests, and backported the fix to Shoelace, and it should be part of the next alpha release.

[HovKlan-DH]

Sorry, I was not at all my intention to come with a harsh comment, though I can understand now, that I probably could have asked this a little better. I was just thinking that the current demo-code could easily be tested between releases, but I fully understand that there can be relevant timing issues, which I did not consider.

Thanks a lot for your great work with Web Awesome 😊

[KonnorRogers]

Sorry, I was not at all my intention to come with a harsh comment, though I can understand now, that I probably could have asked this a little better. I was just thinking that the current demo-code could easily be tested between releases, but I fully understand that there can be relevant timing issues, which I did not consider.

Thanks a lot for your great work with Web Awesome 😊

All good!

FWIW, this has been a long standing issue with this component that I was never quite able to fully wrangle until recently. If you're curious about the fix, the PR for Shoelace is here:

shoelace-style/shoelace#2204

and the original issue:

shoelace-style/shoelace#1570

and is roughly the same thing I did to fix it in web awesome.

[ziofat]

I don't think it is really related to lazy laoding options. I can easily reproduce this issue from the codepen provided by docs page which has no lazy loading options.
The initial render is OK, but after changing the value in HTML(which cause a refresh), the pre-selected options are gone.

[KonnorRogers]

Thats most

I don't think it is really related to lazy laoding options. I can easily reproduce this issue from the codepen provided by docs page which has no lazy loading options. The initial render is OK, but after changing the value in HTML(which cause a refresh), the pre-selected options are gone.

I'm pretty positive the problem is a load order issue. Its not technically lazy loading thats the problem, just usually when it shows up due to timings.

Its what happens when the <wa-select> registers before the <wa-option>. This should be solved with the next release. I'll ping here and see if you can still reproduce after the next release.

[KonnorRogers]

@ziofat Better yet, let me know if this one works for you.

https://codepen.io/paramagicdev/pen/abeEmZO?editors=1000

This forces the <wa-option> to register before <wa-select> and seems to behave as expected for me.

[ziofat]

@KonnorRogers It works!