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.94k stars 830 forks source link

2.18 regression: sl-select does not show selected values on first render #2254

Open shonya3 opened 1 week ago

shonya3 commented 1 week ago

Describe the bug

Select element does not show selected values on first render since 3.18.

Demo

I'll link two stackblitz demo. 2.17.1 - wihtout bug, and 2.18 - with bug(does not show values).

2.17.1 (values rendered) https://stackblitz.com/edit/vitejs-vite-q2mcgs?file=package.json,src%2Fhome-page.ts

2.18 (no values) https://stackblitz.com/edit/vitejs-vite-y9ciev?file=src%2Fhome-page.ts&terminal=dev But if you await promise and request update, then values get rendered. Uncomment this in 3.18 example in home-page.ts :

 // protected async firstUpdated() {
  //   await new Promise((r) => setTimeout(r));
  //   this.requestUpdate();
  // }

Screenshots

3.17.1 image

3.18 image

Browser / OS

KonnorRogers commented 1 week ago

Duplicate of https://github.com/shoelace-style/shoelace/issues/1570#issuecomment-2448372439

(going to leave this bug open since I never made a formal report)

Thanks, for the report, I'm looking into it. The TLDR is that the value property is being triggered before the element connects and Lit's lifecycle has started so it never toggles the valueHasChanged property.