diff --git a/docs/components/progress-ring.md b/docs/components/progress-ring.md
index f85bc215..04c83f9c 100644
--- a/docs/components/progress-ring.md
+++ b/docs/components/progress-ring.md
@@ -5,7 +5,7 @@
Progress rings are used to show the progress of a determinate operation in a circular fashion.
```html preview
-
+
```
## Examples
diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts
index 0b8ebd17..1a00f101 100644
--- a/src/components/alert/alert.ts
+++ b/src/components/alert/alert.ts
@@ -168,7 +168,7 @@ export default class SlAlert extends LitElement {
}
}
- @watch('duration', { waitUntilFirstUpdate: true })
+ @watch('duration')
handleDurationChange() {
this.restartAutoHide();
}
diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts
index 6fe8ddd2..18c82225 100644
--- a/src/components/progress-ring/progress-ring.ts
+++ b/src/components/progress-ring/progress-ring.ts
@@ -35,10 +35,6 @@ export default class SlProgressRing extends LitElement {
}
@watch('percentage', { waitUntilFirstUpdate: true })
- handlePercentageChange() {
- this.updateProgress();
- }
-
updateProgress() {
const radius = this.indicator.r.baseVal.value;
const circumference = radius * 2 * Math.PI;
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 2cd15fad..438e39bb 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -102,7 +102,6 @@ export default class SlRadio extends LitElement {
if (this.checked) {
this.getSiblingRadios().map(radio => (radio.checked = false));
}
- this.input.checked = this.checked;
this.slChange.emit();
}
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index c690af64..ec4f661d 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -187,7 +187,7 @@ export default class SlSelect extends LitElement {
this.syncItemsFromValue();
}
- @watch('disabled', { waitUntilFirstUpdate: true })
+ @watch('disabled')
handleDisabledChange() {
if (this.disabled && this.isOpen) {
this.dropdown.hide();
@@ -281,7 +281,7 @@ export default class SlSelect extends LitElement {
this.box.focus();
}
- @watch('multiple', { waitUntilFirstUpdate: true })
+ @watch('multiple')
handleMultipleChange() {
// Cast to array | string based on `this.multiple`
const value = this.getValueAsArray();
@@ -289,8 +289,8 @@ export default class SlSelect extends LitElement {
this.syncItemsFromValue();
}
- @watch('helpText', { waitUntilFirstUpdate: true })
- @watch('label', { waitUntilFirstUpdate: true })
+ @watch('helpText')
+ @watch('label')
async handleSlotChange() {
this.hasHelpTextSlot = hasSlot(this, 'help-text');
this.hasLabelSlot = hasSlot(this, 'label');
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index 7d470c8e..182a5762 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -216,13 +216,15 @@ export default class SlTabGroup extends LitElement {
});
}
- @watch('noScrollControls', { waitUntilFirstUpdate: true })
+ @watch('noScrollControls')
updateScrollControls() {
- if (this.noScrollControls) {
- this.hasScrollControls = false;
- } else {
- this.hasScrollControls =
- ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
+ if (this.nav) {
+ if (this.noScrollControls) {
+ this.hasScrollControls = false;
+ } else {
+ this.hasScrollControls =
+ ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
+ }
}
}
@@ -270,7 +272,7 @@ export default class SlTabGroup extends LitElement {
});
}
- @watch('placement', { waitUntilFirstUpdate: true })
+ @watch('placement')
syncIndicator() {
if (this.indicator) {
const tab = this.getActiveTab();
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index bcef8fe3..4911d304 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -242,7 +242,7 @@ export default class SlTextarea extends LitElement {
this.slFocus.emit();
}
- @watch('rows', { waitUntilFirstUpdate: true })
+ @watch('rows')
handleRowsChange() {
this.setTextareaHeight();
}
@@ -254,17 +254,21 @@ export default class SlTextarea extends LitElement {
this.hasLabelSlot = hasSlot(this, 'label');
}
- @watch('value', { waitUntilFirstUpdate: true })
+ @watch('value')
handleValueChange() {
- this.invalid = !this.input.checkValidity();
+ if (this.input) {
+ this.invalid = !this.input.checkValidity();
+ }
}
setTextareaHeight() {
- if (this.resize === 'auto') {
- this.input.style.height = 'auto';
- this.input.style.height = this.input.scrollHeight + 'px';
- } else {
- (this.input.style.height as string | undefined) = undefined;
+ if (this.input) {
+ if (this.resize === 'auto') {
+ this.input.style.height = 'auto';
+ this.input.style.height = this.input.scrollHeight + 'px';
+ } else {
+ (this.input.style.height as string | undefined) = undefined;
+ }
}
}
diff --git a/src/internal/decorators.ts b/src/internal/decorators.ts
index eb5c9777..b3508868 100644
--- a/src/internal/decorators.ts
+++ b/src/internal/decorators.ts
@@ -65,8 +65,8 @@ export class EventEmitter {
//
// Runs when an observed property changes, e.g. @property or @state, but before the component updates.
//
-// To wait for the update to complete after a change, use `await this.updateComplete` in the handler. To determine if
-// the component has previously been updated/rendered, check `this.hasUpdated` in the handler.
+// To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start
+// watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
//
// Usage:
//