You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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'.
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
The text was updated successfully, but these errors were encountered:
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.
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.
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:
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
The text was updated successfully, but these errors were encountered: