diff --git a/packages/combo-box/src/vaadin-combo-box-mixin.js b/packages/combo-box/src/vaadin-combo-box-mixin.js index ef99eee674..890923514b 100644 --- a/packages/combo-box/src/vaadin-combo-box-mixin.js +++ b/packages/combo-box/src/vaadin-combo-box-mixin.js @@ -543,17 +543,6 @@ export const ComboBoxMixin = (subclass) => theme, itemClassNameGenerator, }); - - // NOTE: in PolylitMixin, setProperties() waits for `hasUpdated` to be set. - // This means for the first opening, properties won't be set synchronously. - // Call `performUpdate()` in this case to mimic the Polymer version logic. - if (scroller.performUpdate && !scroller.hasUpdated) { - try { - scroller.performUpdate(); - } catch (_) { - // Suppress errors in synchronous tests for pre-opened combo-box. - } - } } } diff --git a/packages/combo-box/src/vaadin-combo-box-scroller-mixin.js b/packages/combo-box/src/vaadin-combo-box-scroller-mixin.js index 9eb94c089f..962a424e04 100644 --- a/packages/combo-box/src/vaadin-combo-box-scroller-mixin.js +++ b/packages/combo-box/src/vaadin-combo-box-scroller-mixin.js @@ -329,12 +329,6 @@ export const ComboBoxScrollerMixin = (superClass) => el.className = ''; } - // NOTE: in PolylitMixin, setProperties() waits for `hasUpdated` to be set. - // However, this causes issues with virtualizer. So we enforce sync update. - if (el.performUpdate && !el.hasUpdated) { - el.performUpdate(); - } - el.id = `${this.__hostTagName}-item-${index}`; el.setAttribute('role', index !== undefined ? 'option' : false); el.setAttribute('aria-selected', selected.toString()); diff --git a/packages/component-base/src/polylit-mixin.js b/packages/component-base/src/polylit-mixin.js index 1405f3b333..f574f6ff78 100644 --- a/packages/component-base/src/polylit-mixin.js +++ b/packages/component-base/src/polylit-mixin.js @@ -195,6 +195,12 @@ const PolylitMixinImplementation = (superclass) => { return result; } + static get polylitConfig() { + return { + asyncFirstRender: false, + }; + } + constructor() { super(); this.__hasPolylitMixin = true; @@ -214,6 +220,11 @@ const PolylitMixinImplementation = (superclass) => { parentHost.$ ||= {}; parentHost.$[this.id] = this; } + + const { polylitConfig } = this.constructor; + if (!this.hasUpdated && !polylitConfig.asyncFirstRender) { + this.performUpdate(); + } } /** @protected */ diff --git a/packages/component-base/test/polylit-mixin.test.js b/packages/component-base/test/polylit-mixin.test.js index e2e40f60bf..9f0a21ae1b 100644 --- a/packages/component-base/test/polylit-mixin.test.js +++ b/packages/component-base/test/polylit-mixin.test.js @@ -6,8 +6,9 @@ import { html, unsafeStatic } from 'lit/static-html.js'; import { PolylitMixin } from '../src/polylit-mixin.js'; describe('PolylitMixin', () => { - describe('ready', () => { + describe('first render', () => { let element; + const readySpy = sinon.spy(); const tag = defineCE( @@ -26,11 +27,21 @@ describe('PolylitMixin', () => { element = fixtureSync(`<${tag}>`); }); - it('should call ready when element update is complete', async () => { - expect(readySpy.calledOnce).to.be.false; - await element.updateComplete; + afterEach(() => { + readySpy.resetHistory(); + }); + + it('should call ready once element is connected to the DOM', () => { expect(readySpy.calledOnce).to.be.true; }); + + it('should not flush updates synchronously when element is reconnected to the DOM', () => { + const spy = sinon.spy(element, 'performUpdate'); + const { parentElement } = element; + parentElement.removeChild(element); + parentElement.appendChild(element); + expect(spy).to.be.not.called; + }); }); describe('convenience', () => { @@ -51,9 +62,8 @@ describe('PolylitMixin', () => { }, ); - beforeEach(async () => { + beforeEach(() => { element = fixtureSync(`<${tag}>`); - await element.updateComplete; }); it('should get the nested value', () => { @@ -101,9 +111,8 @@ describe('PolylitMixin', () => { }, ); - beforeEach(async () => { + beforeEach(() => { element = fixtureSync(`<${tag}>`); - await element.updateComplete; }); it('should reflect string property to attribute', async () => { @@ -163,9 +172,8 @@ describe('PolylitMixin', () => { }, ); - beforeEach(async () => { + beforeEach(() => { element = fixtureSync(`<${tag}>`); - await element.updateComplete; }); it('should not set property marked as readOnly using setter', async () => { @@ -476,10 +484,11 @@ describe('PolylitMixin', () => { describe('complex observer', () => { let element; - let valueOrLoadingChangedSpy, countOrLoadingChangedSpy; const readySpy = sinon.spy(); const helperChangedSpy = sinon.spy(); + const valueOrLoadingChangedSpy = sinon.spy(); + const countOrLoadingChangedSpy = sinon.spy(); const tag = defineCE( class extends PolylitMixin(LitElement) { @@ -531,9 +540,13 @@ describe('PolylitMixin', () => { `; } - _valueOrLoadingChanged(_value, _loading) {} + _valueOrLoadingChanged(value, loading) { + valueOrLoadingChangedSpy(value, loading); + } - _countOrLoadingChanged(_count, _loading) {} + _countOrLoadingChanged(count, loading) { + countOrLoadingChangedSpy(count, loading); + } _helperChanged(value) { helperChangedSpy(value); @@ -543,11 +556,13 @@ describe('PolylitMixin', () => { }, ); - beforeEach(async () => { + beforeEach(() => { element = fixtureSync(`<${tag}>`); - valueOrLoadingChangedSpy = sinon.spy(element, '_valueOrLoadingChanged'); - countOrLoadingChangedSpy = sinon.spy(element, '_countOrLoadingChanged'); - await element.updateComplete; + }); + + afterEach(() => { + valueOrLoadingChangedSpy.resetHistory(); + countOrLoadingChangedSpy.resetHistory(); }); it('should call ready after observers during initialization', () => { @@ -637,11 +652,10 @@ describe('PolylitMixin', () => { }, ); - beforeEach(async () => { + beforeEach(() => { element = fixtureSync(`<${tag}>`); valueChangedSpy = sinon.spy(element, '_valueChanged'); complexSpy = sinon.spy(element, '_valueChangedComplex'); - await element.updateComplete; }); it('should run dynamic property observer once a property value changes', async () => { @@ -712,10 +726,9 @@ describe('PolylitMixin', () => { }, ); - beforeEach(async () => { + beforeEach(() => { element = fixtureSync(`<${tag}>`); valueOrLoadingChangedSpy = sinon.spy(element, '_valueOrLoadingChanged'); - await element.updateComplete; }); it('should run dynamic method observer once a property value changes', async () => { @@ -802,40 +815,52 @@ describe('PolylitMixin', () => { }, ); - beforeEach(async () => { - element = fixtureSync(`<${tag}>`); - element.addEventListener('helper-changed', helperChangedSpy); - await element.updateComplete; - }); + describe('during initialization', () => { + beforeEach(() => { + element = document.createElement(tag); + element.addEventListener('helper-changed', helperChangedSpy); + document.body.appendChild(element); + }); - it('should call ready after notification event during initialization', () => { - expect(helperChangedSpy.calledOnce).to.be.true; - expect(readySpy.calledOnce).to.be.true; - expect(readySpy.calledAfter(helperChangedSpy)).to.be.true; - }); + afterEach(() => { + document.body.removeChild(element); + }); - it('should fire notification event on property change', async () => { - const spy = sinon.spy(); - element.addEventListener('value-changed', spy); - element.value = 'foo'; - await element.updateComplete; - expect(spy.calledOnce).to.be.true; + it('should call ready after notification event', () => { + expect(helperChangedSpy.calledOnce).to.be.true; + expect(readySpy.calledOnce).to.be.true; + expect(readySpy.calledAfter(helperChangedSpy)).to.be.true; + }); }); - it('should fire notification event for property set in observer', async () => { - const spy = sinon.spy(); - element.addEventListener('has-value-changed', spy); - element.value = 'foo'; - await nextFrame(); - expect(spy.calledOnce).to.be.true; - }); + describe('after initialization', () => { + beforeEach(() => { + element = fixtureSync(`<${tag}>`); + }); - it('should fire notification event for read-only property', async () => { - const spy = sinon.spy(); - element.addEventListener('loading-changed', spy); - element._setLoading(true); - await element.updateComplete; - expect(spy.calledOnce).to.be.true; + it('should fire notification event on property change', async () => { + const spy = sinon.spy(); + element.addEventListener('value-changed', spy); + element.value = 'foo'; + await element.updateComplete; + expect(spy.calledOnce).to.be.true; + }); + + it('should fire notification event for property set in observer', async () => { + const spy = sinon.spy(); + element.addEventListener('has-value-changed', spy); + element.value = 'foo'; + await nextFrame(); + expect(spy.calledOnce).to.be.true; + }); + + it('should fire notification event for read-only property', async () => { + const spy = sinon.spy(); + element.addEventListener('loading-changed', spy); + element._setLoading(true); + await element.updateComplete; + expect(spy.calledOnce).to.be.true; + }); }); }); @@ -862,21 +887,18 @@ describe('PolylitMixin', () => { }, ); - it('should have a default value', async () => { + it('should have a default value', () => { element = fixtureSync(`<${tag}>`); - await element.updateComplete; expect(element.value).to.equal(0); }); - it('should not override initial value', async () => { + it('should not override initial value', () => { element = fixtureSync(`<${tag} value="1">`); - await element.updateComplete; expect(element.value).to.equal(1); }); - it('should get the default value from a function', async () => { + it('should get the default value from a function', () => { element = fixtureSync(`<${tag}>`); - await element.updateComplete; expect(element.count).to.equal(0); }); }); @@ -906,15 +928,13 @@ describe('PolylitMixin', () => { }, ); - it('should compute value', async () => { + it('should compute value', () => { element = fixtureSync(`<${tag}>`); - await element.updateComplete; expect(element.value).to.equal(1); }); it('should update computed value', async () => { element = fixtureSync(`<${tag}>`); - await element.updateComplete; element.loading = false; await element.updateComplete; expect(element.value).to.equal(0); @@ -938,27 +958,23 @@ describe('PolylitMixin', () => { }, ); - it('should support String as property type', async () => { + it('should support String as property type', () => { const element = fixtureSync(`<${tag} name="foo">`); - await element.updateComplete; expect(element.name).to.equal('foo'); }); - it('should support Boolean as property type', async () => { + it('should support Boolean as property type', () => { const element = fixtureSync(`<${tag} opened>`); - await element.updateComplete; expect(element.opened).to.equal(true); }); - it('should support Number as property type', async () => { + it('should support Number as property type', () => { const element = fixtureSync(`<${tag} count="4">`); - await element.updateComplete; expect(element.count).to.equal(4); }); - it('should support Array as property type', async () => { + it('should support Array as property type', () => { const element = fixtureSync(`<${tag} items="[1,2,3]">`); - await element.updateComplete; expect(element.items).to.eql([1, 2, 3]); }); }); @@ -1163,9 +1179,8 @@ describe('PolylitMixin', () => { }, ); - beforeEach(async () => { + beforeEach(() => { element = fixtureSync(`<${tag}>`); - await element.updateComplete; }); it('should set property values on the element', () => { @@ -1277,4 +1292,61 @@ describe('PolylitMixin', () => { }); }); }); + + describe('async first render', () => { + let element; + + const readySpy = sinon.spy(); + const valueChangedSpy = sinon.spy(); + + const tag = defineCE( + class extends PolylitMixin(LitElement) { + static get polylitConfig() { + return { + asyncFirstRender: true, + }; + } + + static get properties() { + return { + value: { + type: String, + value: 'foo', + observer: 'valueChanged', + }, + }; + } + + ready() { + super.ready(); + readySpy(); + } + + valueChanged() { + valueChangedSpy(); + } + }, + ); + + beforeEach(() => { + element = fixtureSync(`<${tag}>`); + }); + + afterEach(() => { + readySpy.resetHistory(); + valueChangedSpy.resetHistory(); + }); + + it('should call ready after first render', async () => { + expect(readySpy).to.be.not.called; + await element.updateComplete; + expect(readySpy).to.be.calledOnce; + }); + + it('should run observers after first render', async () => { + expect(valueChangedSpy).to.be.not.called; + await element.updateComplete; + expect(valueChangedSpy).to.be.calledOnce; + }); + }); }); diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog-mixin.js b/packages/confirm-dialog/src/vaadin-confirm-dialog-mixin.js index ed4c9cc383..db2dfbba90 100644 --- a/packages/confirm-dialog/src/vaadin-confirm-dialog-mixin.js +++ b/packages/confirm-dialog/src/vaadin-confirm-dialog-mixin.js @@ -36,6 +36,7 @@ export const ConfirmDialogMixin = (superClass) => type: Boolean, value: false, notify: true, + sync: true, }, /** @@ -302,6 +303,10 @@ export const ConfirmDialogMixin = (superClass) => }, }); this.addController(this._confirmController); + + this._overlayElement = this.$.dialog.$.overlay; + + this._initOverlay(this._overlayElement); } /** @protected */ diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog.js b/packages/confirm-dialog/src/vaadin-confirm-dialog.js index 0a934315c1..50f9e2844c 100644 --- a/packages/confirm-dialog/src/vaadin-confirm-dialog.js +++ b/packages/confirm-dialog/src/vaadin-confirm-dialog.js @@ -104,15 +104,6 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(C return 'vaadin-confirm-dialog'; } - /** @protected */ - ready() { - super.ready(); - - this._overlayElement = this.$.dialog.$.overlay; - - this._initOverlay(this._overlayElement); - } - /** * @event confirm * fired when Confirm button was pressed. diff --git a/packages/confirm-dialog/src/vaadin-lit-confirm-dialog.js b/packages/confirm-dialog/src/vaadin-lit-confirm-dialog.js index 305e4bf81a..23199b3260 100644 --- a/packages/confirm-dialog/src/vaadin-lit-confirm-dialog.js +++ b/packages/confirm-dialog/src/vaadin-lit-confirm-dialog.js @@ -67,17 +67,6 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(P `; } - /** @protected */ - async ready() { - super.ready(); - - await this.$.dialog.updateComplete; - - this._overlayElement = this.$.dialog.$.overlay; - - this._initOverlay(this._overlayElement); - } - /** @private */ _onOpenedChanged(event) { this.opened = event.detail.value; diff --git a/packages/date-picker/src/vaadin-infinite-scroller.js b/packages/date-picker/src/vaadin-infinite-scroller.js index 71ffea3552..9a16ff7fd6 100644 --- a/packages/date-picker/src/vaadin-infinite-scroller.js +++ b/packages/date-picker/src/vaadin-infinite-scroller.js @@ -380,10 +380,6 @@ export class InfiniteScroller extends HTMLElement { itemWrapper.instance = this._createElement(); itemWrapper.appendChild(itemWrapper.instance); - if (itemWrapper.instance.performUpdate) { - itemWrapper.instance.performUpdate(); - } - Object.keys(tmpInstance).forEach((prop) => { itemWrapper.instance[prop] = tmpInstance[prop]; }); diff --git a/packages/date-time-picker/src/vaadin-date-time-picker-mixin.js b/packages/date-time-picker/src/vaadin-date-time-picker-mixin.js index 24e2a84b33..3b77c9f4fe 100644 --- a/packages/date-time-picker/src/vaadin-date-time-picker-mixin.js +++ b/packages/date-time-picker/src/vaadin-date-time-picker-mixin.js @@ -30,11 +30,6 @@ class PickerSlotController extends SlotController { constructor(host, type) { super(host, `${type}-picker`, `vaadin-${type}-picker`, { initializer: (picker, host) => { - // Ensure initial value-changed is fired on the slotted pickers - // synchronously in Lit version to avoid overriding host value. - if (picker.performUpdate) { - picker.performUpdate(); - } const prop = `__${type}Picker`; host[prop] = picker; }, diff --git a/packages/dialog/src/vaadin-dialog-base-mixin.js b/packages/dialog/src/vaadin-dialog-base-mixin.js index 975325d6d2..1e4240289b 100644 --- a/packages/dialog/src/vaadin-dialog-base-mixin.js +++ b/packages/dialog/src/vaadin-dialog-base-mixin.js @@ -19,6 +19,7 @@ export const DialogBaseMixin = (superClass) => type: Boolean, value: false, notify: true, + sync: true, }, /** diff --git a/packages/field-base/src/input-mixin.js b/packages/field-base/src/input-mixin.js index edf65b81fb..839ada4fc4 100644 --- a/packages/field-base/src/input-mixin.js +++ b/packages/field-base/src/input-mixin.js @@ -32,6 +32,7 @@ export const InputMixin = dedupingMixin( type: Object, readOnly: true, observer: '_inputElementChanged', + sync: true, }, /** diff --git a/packages/grid/src/vaadin-grid-dynamic-columns-mixin.js b/packages/grid/src/vaadin-grid-dynamic-columns-mixin.js index 152f46b49e..995bad6173 100644 --- a/packages/grid/src/vaadin-grid-dynamic-columns-mixin.js +++ b/packages/grid/src/vaadin-grid-dynamic-columns-mixin.js @@ -36,7 +36,10 @@ export const DynamicColumnsMixin = (superClass) => /** * @protected */ - _columnTree: Object, + _columnTree: { + type: Object, + sync: true, + }, }; } @@ -100,15 +103,6 @@ export const DynamicColumnsMixin = (superClass) => const columnTree = this._getColumnTree(); if (!arrayEquals(columnTree, this._columnTree)) { - // Request a synchronoys update for each column - columnTree.forEach((columnArray) => { - columnArray.forEach((column) => { - if (column.performUpdate) { - column.performUpdate(); - } - }); - }); - this._columnTree = columnTree; } } diff --git a/packages/grid/src/vaadin-grid-sorter-mixin.js b/packages/grid/src/vaadin-grid-sorter-mixin.js index 76187a68a2..7e2a11ce60 100644 --- a/packages/grid/src/vaadin-grid-sorter-mixin.js +++ b/packages/grid/src/vaadin-grid-sorter-mixin.js @@ -118,13 +118,6 @@ export const GridSorterMixin = (superClass) => connectedCallback() { super.connectedCallback(); - if (this.performUpdate) { - // Force Lit's first render to be synchronous to ensure - // _pathOrDirectionChanged is triggered before grid's - // __applySorters, as it is in Polymer. - this.performUpdate(); - } - if (this._grid) { this._grid.__applySorters(); } else { diff --git a/packages/grid/src/vaadin-grid-tree-column-mixin.js b/packages/grid/src/vaadin-grid-tree-column-mixin.js index 42aa38b098..9af0a97b65 100644 --- a/packages/grid/src/vaadin-grid-tree-column-mixin.js +++ b/packages/grid/src/vaadin-grid-tree-column-mixin.js @@ -51,10 +51,6 @@ export const GridTreeColumnMixin = (superClass) => toggle.leaf = this.__isLeafItem(item, this._grid.itemHasChildrenPath); toggle.textContent = this.__getToggleContent(this.path, item); toggle.level = level; - - if (toggle.performUpdate) { - toggle.performUpdate(); - } } /** diff --git a/packages/login/src/vaadin-login-overlay-mixin.js b/packages/login/src/vaadin-login-overlay-mixin.js index d9c74920b3..3089718ae0 100644 --- a/packages/login/src/vaadin-login-overlay-mixin.js +++ b/packages/login/src/vaadin-login-overlay-mixin.js @@ -107,14 +107,9 @@ export const LoginOverlayMixin = (superClass) => } /** @private */ - async _onOpenedChange() { + _onOpenedChange() { const form = this.$.vaadinLoginForm; - // Wait for initial render on overlay initialization - if (!form.$ && this.updateComplete) { - await this.updateComplete; - } - if (!this.opened) { form.$.vaadinLoginUsername.value = ''; form.$.vaadinLoginPassword.value = ''; diff --git a/packages/login/test/login-overlay.common.js b/packages/login/test/login-overlay.common.js index aba817209f..f301a5a638 100644 --- a/packages/login/test/login-overlay.common.js +++ b/packages/login/test/login-overlay.common.js @@ -59,7 +59,7 @@ describe('opened overlay', () => { const newParent = document.createElement('div'); document.body.appendChild(newParent); newParent.appendChild(overlay); - await nextUpdate(overlay); + await nextRender(); expect(document.querySelector('vaadin-login-form-wrapper')).to.exist; }); diff --git a/packages/menu-bar/src/vaadin-menu-bar-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-mixin.js index ac03709af7..d0e7c79484 100644 --- a/packages/menu-bar/src/vaadin-menu-bar-mixin.js +++ b/packages/menu-bar/src/vaadin-menu-bar-mixin.js @@ -935,7 +935,7 @@ export const MenuBarMixin = (superClass) => this._expandedButton = button; - requestAnimationFrame(async () => { + requestAnimationFrame(() => { // After changing items, buttons are recreated so the old button is // no longer in the DOM. Reset position target to null to prevent // overlay from closing due to target width / height equal to 0. @@ -954,12 +954,6 @@ export const MenuBarMixin = (superClass) => this._setExpanded(button, true); - // Delay setting position target until overlay is rendered - // to correctly measure item content in Lit based version. - if (overlay.updateComplete) { - await overlay.updateComplete; - } - overlay.positionTarget = button; }); diff --git a/packages/message-input/src/vaadin-message-input-mixin.js b/packages/message-input/src/vaadin-message-input-mixin.js index d5f198904f..b7f86e6bad 100644 --- a/packages/message-input/src/vaadin-message-input-mixin.js +++ b/packages/message-input/src/vaadin-message-input-mixin.js @@ -116,15 +116,6 @@ export const MessageInputMixin = (superClass) => } }); - // With Lit version, input element renders asynchronously and it will - // override the `rows` attribute set to `1` in the `minRows` observer. - // Workaround: perform update twice to run the observer synchronously. - // TODO: needs https://github.com/vaadin/web-components/pull/8168 - if (textarea.performUpdate) { - textarea.performUpdate(); - textarea.performUpdate(); - } - const input = textarea.inputElement; // Set initial height to one row diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal-mixin.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal-mixin.js index 8959b471fd..9052956575 100644 --- a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal-mixin.js +++ b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal-mixin.js @@ -147,11 +147,7 @@ export const MultiSelectComboBoxInternalMixin = (superClass) => } /** @protected */ - async _updateOverlayWidth() { - if (!this.$ && this.updateComplete) { - await this.updateComplete; - } - + _updateOverlayWidth() { this.$.overlay._updateOverlayWidth(); } diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-mixin.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-mixin.js index 2f4d8303c0..97606df7e0 100644 --- a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-mixin.js +++ b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-mixin.js @@ -809,15 +809,11 @@ export const MultiSelectComboBoxMixin = (superClass) => } /** @private */ - async __updateChips() { + __updateChips() { if (!this._inputField || !this.inputElement) { return; } - if (!this._inputField.$) { - await this._inputField.updateComplete; - } - // Clear all chips except the overflow this._chips.forEach((chip) => { chip.remove(); @@ -844,10 +840,6 @@ export const MultiSelectComboBoxMixin = (superClass) => for (let i = items.length - 1, refNode = null; i >= 0; i--) { const chip = this.__createChip(items[i]); this.insertBefore(chip, refNode); - // Render Lit based chip - if (chip.performUpdate) { - chip.performUpdate(); - } refNode = chip; chips.unshift(chip); } @@ -883,10 +875,6 @@ export const MultiSelectComboBoxMixin = (superClass) => for (let i = items.length - 1, refNode = null; i >= 0; i--) { const chip = this.__createChip(items[i]); this.insertBefore(chip, refNode); - // Render Lit based chip - if (chip.performUpdate) { - chip.performUpdate(); - } // When auto expanding vertically, no need to measure remaining width if (!this.autoExpandVertically && this.$.chips.clientWidth > remainingWidth) { diff --git a/packages/notification/src/vaadin-notification-mixin.js b/packages/notification/src/vaadin-notification-mixin.js index c07befaaff..23f99e25a0 100644 --- a/packages/notification/src/vaadin-notification-mixin.js +++ b/packages/notification/src/vaadin-notification-mixin.js @@ -355,10 +355,6 @@ export const NotificationMixin = (superClass) => return; } - if (this._container.performUpdate) { - this._container.performUpdate(); - } - if (!this._container.shadowRoot.querySelector(`slot[name="${this.position}"]`)) { console.warn(`Invalid alignment parameter provided: position=${this.position}`); return; diff --git a/packages/popover/src/vaadin-popover.js b/packages/popover/src/vaadin-popover.js index 6545d1861c..12b1ea6f48 100644 --- a/packages/popover/src/vaadin-popover.js +++ b/packages/popover/src/vaadin-popover.js @@ -516,7 +516,7 @@ class Popover extends PopoverPositionMixin( ready() { super.ready(); - this._overlayElement = this.shadowRoot.querySelector('vaadin-popover-overlay'); + this._overlayElement = this.$[this.__overlayId]; } /** @protected */ diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js b/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js index 7adf61157c..3f2a8a207e 100644 --- a/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js +++ b/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js @@ -319,13 +319,9 @@ export const RichTextEditorMixin = (superClass) => } /** @protected */ - async connectedCallback() { + connectedCallback() { super.connectedCallback(); - if (!this.$ && this.updateComplete) { - await this.updateComplete; - } - this._editor.emitter.connect(); } diff --git a/packages/select/src/vaadin-select-base-mixin.js b/packages/select/src/vaadin-select-base-mixin.js index cc160fe5f7..28a08ab672 100644 --- a/packages/select/src/vaadin-select-base-mixin.js +++ b/packages/select/src/vaadin-select-base-mixin.js @@ -464,11 +464,6 @@ export const SelectBaseMixin = (superClass) => */ __appendValueItemElement(itemElement, parent) { parent.appendChild(itemElement); - // Trigger observer that sets aria-selected attribute - // so that we can then synchronously remove it below. - if (itemElement.performUpdate) { - itemElement.performUpdate(); - } itemElement.removeAttribute('tabindex'); itemElement.removeAttribute('aria-selected'); itemElement.removeAttribute('role'); diff --git a/packages/upload/src/vaadin-lit-upload-file.js b/packages/upload/src/vaadin-lit-upload-file.js index 7a2f51639d..e1d6945437 100644 --- a/packages/upload/src/vaadin-lit-upload-file.js +++ b/packages/upload/src/vaadin-lit-upload-file.js @@ -5,7 +5,7 @@ */ import '@vaadin/progress-bar/src/vaadin-progress-bar.js'; import './vaadin-upload-icons.js'; -import { html, LitElement } from 'lit'; +import { html, LitElement, nothing } from 'lit'; import { defineCustomElement } from '@vaadin/component-base/src/define.js'; import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; @@ -52,7 +52,7 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LitElement)) @click="${this._fireFileEvent}" ?hidden="${!this.held}" ?disabled="${this.disabled}" - aria-label="${this.i18n.file.start}" + aria-label="${this.i18n ? this.i18n.file.start : nothing}" aria-describedby="name" >