prettier

src/components/select/select.component.ts

@@ -671,15 +671,27 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
     }
   }
 
-  @watch(['defaultValue', 'value'], { waitUntilFirstUpdate: true })
-  handleValueChange() {
-    if (!this.valueHasChanged) {
-      const cachedValueHasChanged = this.valueHasChanged
+  attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+    if (name === 'value') {
+      const cachedValueHasChanged = this.valueHasChanged;
       this.value = this.defaultValue;
 
       // Set it back to false since this isn't an interaction.
       this.valueHasChanged = cachedValueHasChanged;
     }
+  }
+
+  @watch(['defaultValue', 'value'], { waitUntilFirstUpdate: true })
+  handleValueChange() {
+    if (!this.valueHasChanged) {
+      const cachedValueHasChanged = this.valueHasChanged;
+      this.value = this.defaultValue;
+
+      // Set it back to false since this isn't an interaction.
+      this.valueHasChanged = cachedValueHasChanged;
+    }
+
     const allOptions = this.getAllOptions();
     const value = Array.isArray(this.value) ? this.value : [this.value];
 

src/components/select/select.test.ts

@@ -774,16 +774,16 @@ describe('<sl-select>', () => {
 
       expect(select.value).to.deep.equal(['foo', 'bar']);
 
-      await clickOnElement(select)
-      await select.updateComplete
-      await clickOnElement(select.querySelector("[value='foo']")!)
+      await clickOnElement(select);
+      await select.updateComplete;
+      await clickOnElement(select.querySelector("[value='foo']")!);
 
-      await select.updateComplete
-      await aTimeout(10)
+      await select.updateComplete;
+      await aTimeout(10);
       expect(select.value).to.deep.equal(['bar']);
 
-      select.setAttribute("value", "foo bar")
-      await aTimeout(10)
+      select.setAttribute('value', 'foo bar');
+      await aTimeout(10);
       expect(select.value).to.deep.equal(['foo', 'bar']);
     });
   });