From 94fe4f1f4654eba5836f4a552c1ffc707541cc5a Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 18 Jun 2021 08:51:00 -0400 Subject: [PATCH] remove { waitUntilFirstUpdate } when not needed --- docs/components/progress-ring.md | 2 +- src/components/alert/alert.ts | 2 +- src/components/progress-ring/progress-ring.ts | 4 ---- src/components/radio/radio.ts | 1 - src/components/select/select.ts | 8 ++++---- src/components/tab-group/tab-group.ts | 16 ++++++++------- src/components/textarea/textarea.ts | 20 +++++++++++-------- src/internal/decorators.ts | 4 ++-- 8 files changed, 29 insertions(+), 28 deletions(-) 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: //