search

shoelace-style / shoelace

A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇
https://webawesome.com
MIT License
12.98k stars 837 forks source link

`sl-select` doesn't update label if `sl-option` label changes #1971

Closed Ryex closed 1 month ago

Ryex commented 7 months ago

Describe the bug

At first I thought this was a regression on #729 but it seems it's more of a case where there are situations where the sl-option can change without the slotchange event firing.

To Reproduce

Steps to reproduce the behavior:

  1. render the sl-option 's from containing custom component state in a lit html template
  2. update custom component state
  3. menu item will change, select display label will not.

Demo

https://codepen.io/Ryex-the-bashful/pen/JjVZjZy

Screenshots

image

Browser / OS

tested latest Firefox and Edge

Additional information

I tried force an update but without sub classing adding a mutation observer I couldn't come up with a method

KonnorRogers commented 7 months ago

🤔 This is interesting. I think we would need a MutationObserver attached to <sl-select>

It seems like handleValueChange on <sl-select> can force an update.

https://codepen.io/paramagicdev/pen/MWRxXod

Ryex commented 3 months ago

I was also able to overcome issue this with signals by forcing the update on a signal subscription https://codepen.io/Ryex-the-bashful/pen/wvLpOVa