select Html Element Not Updating Correctly After Specific Interactions

[WagnerExpansiva]

Which package(s) are affected?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

link to playground lit

I've encountered an issue with select html elements in Lit where the selectedIndex property does not update as expected after a series of specific steps, even though the HTML updates correctly. This results in the second dropdown not resetting to its default state.

Expected Behavior:

After selecting a item from dropdown 1, dropdown 2 should reset to its default state ('b0') regardless of the previous selections.

Additional Details:

This issue seems to occur only after a specific sequence of interactions with the dropdowns, suggesting that it might be related to how state changes are handled or propagated.
Could you please help investigate this issue? It seems to impact the usability of forms that rely on conditional dropdown selections.

Reproduction

Go to the provided Lit playground link

Perform the following sequence of actions:

Select 'a1' from dropdown 1, then select 'b1' from dropdown 2. At this point, everything works as expected, and if you select 'a2' from dropdown 1, dropdown 2 resets to 'b0'.

Now, select 'a1' again, choose 'b1' from dropdown 2, then select 'b0', and 'b1' again from dropdown 2. Finally, when you select 'a2' from dropdown 1, the issue occurs: dropdown 2 incorrectly stays on 'b1' instead of resetting to 'b0'.

<select id="tselect2" data-sel2="b0">
            <option value="b0" selected>b0</option>
            <option value="b1">b1</option>
            <option value="b2">b2</option>
</select>

Despite the selected attribute being correctly set to "b0" in the HTML, the selectedIndex property of the select element incorrectly remains at 1, causing 'b1' to be displayed as the selected option instead of 'b0'.

Workaround

I have not found a workaround

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

Failing in 3.2.0

Browser/OS/Node environment

Browser: Chrome
SO: MacOS 14.3.1

[sorvell]

Change <option ?selected= ... to <option .selected=...

Changing the boolean attribute bindings to property bindings seems to fix it. I didn't fully digest the logic, but in general binding to attributes for live updates is not good since the platform generally uses attributes for interactive controls only until the user has interacted with the element.

[sorvell]

Yeah, if you want more background, check out:

The dirtiness of an option element is a boolean state, initially false. It controls whether adding or removing the selected content attribute has any effect.