Fix selected attribute on <wa-option> when <wa-select> has with-clear #1922

[kelseythejackson]

Issue

Fixes #1922

wa-select - wa-option: Selected attribute ignored on wa-option when wa-select has with-clear

The selected attribute on wa-option elements was being ignored when the parent wa-select had the with-clear attribute.

Root Cause

The issue was in wa-option's willUpdate lifecycle method. On first render, it was unconditionally setting selected = defaultSelected (which defaults to false), overwriting any selected value that was set directly by frameworks like Vue.

Changes Made

src/components/option/option.ts

1. Modified willUpdate (lines 146-160): Now only syncs selected = defaultSelected when defaultSelected is true. This prevents overwriting selected when it was set directly by frameworks.
2. Added firstUpdated (lines 190-203): Notifies the parent select when selected is set directly (e.g., by Vue's :selected="true" binding).

src/components/select/select.test.ts

Added three tests to verify the fix:

• should select options using the selected attribute with with-clear
• should select options with selected attribute,with-clear, and placeholder
• should select multiple options with selected attribute and with-clear

Test Results

All tests in the select component pass.

Other Components

• wa-input also uses with-clear but is not affected - it doesn't use child elements with selected attributes

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
webawesome	Ready	Preview	Feb 19, 2026 11:44pm

[claviska]

I can't replicate this outside of the repro provided in #1922, which uses Vue.

I'm going to request that @KonnorRogers also take a look at this, since he has intricate knowledge about form-association and framework bindings. I'm mostly concerned about the proposed changes having negative effects outside of the framework.

[KonnorRogers]

Form association stuff should be fine, im a little concerned about having a decent number of options slowing down the DOM constantly re-running the selectionUpdated on <wa-select> / <wa-combobox>

[KonnorRogers]

🤔 I'm a little worried about this firing many times for initial page load as selectionChanged() is going to iterate all <wa-option> elements everytime a new one is added and could make this fire many times, and to me seems like an expensive operation.

[claviska]

Any suggestions to move this forward?

[KonnorRogers]

I think I'd feel safer with something like a debounced selectionChanged tbh, but thats just my personal preference.

This is probably fine tbh

[claviska]

I requeued the failing tests. There's a chance the timeout was just a hiccup.

[claviska]

The test still fails: https://github.com/shoelace-style/webawesome/actions/runs/21646558998/job/62484414100?pr=1985

Looking again, it seems legitimate.

[claviska]

@KonnorRogers Don't we expect this to work in Vue et al? (Note the use of :value here)

<wa-select label="selected" :value="option-4">
  <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>

Aren't the selected attributes for non-framework environments? If so, I don't think this fix is appropriate. If not, how do we expect frameworks to set the selected value? Forcing the attribute would be especially painful, especially in React.

[KonnorRogers]

Correct, direct value setting is supported and should work. The only place it gets weird is setting a value attribute, as we only support that for selecting a single item.

[KonnorRogers]

Original Reproduction:

https://stackblitz.com/edit/vitejs-vite-n4i4ys4n?file=src%2FApp.vue

With Kelsey's fix:

https://stackblitz.com/edit/vitejs-vite-fftfnzsv?file=src%2FApp.vue,src%2Fmain.js

it does seem to fix the broken selects.

[KonnorRogers]

Just add a changelog entry, and i think this is good to go.