From a72fd19b7305ac029f72f7322f5b1afba74cba38 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 26 May 2022 22:28:05 +0200 Subject: [PATCH] Fix combo box inside dialog (#12805) --- package.json | 4 +- src/components/entity/ha-entity-picker.ts | 1 + src/components/ha-combo-box.ts | 57 ++++++- .../dialog-add-application-credential.ts | 9 +- yarn.lock | 141 +++++++++--------- 5 files changed, 132 insertions(+), 80 deletions(-) diff --git a/package.json b/package.json index 5878a64212..76028454a6 100644 --- a/package.json +++ b/package.json @@ -89,8 +89,8 @@ "@polymer/paper-tooltip": "^3.0.1", "@polymer/polymer": "3.4.1", "@thomasloven/round-slider": "0.5.4", - "@vaadin/combo-box": "^22.0.4", - "@vaadin/vaadin-themable-mixin": "^22.0.4", + "@vaadin/combo-box": "^23.0.10", + "@vaadin/vaadin-themable-mixin": "^23.0.10", "@vibrant/color": "^3.2.1-alpha.1", "@vibrant/core": "^3.2.1-alpha.1", "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1", diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts index 3b6c3e6304..bc9e7a0192 100644 --- a/src/components/entity/ha-entity-picker.ts +++ b/src/components/entity/ha-entity-picker.ts @@ -31,6 +31,7 @@ const rowRenderer: ComboBoxLitRenderer = (item) => ${item.friendly_name} ${item.entity_id} `; + @customElement("ha-entity-picker") export class HaEntityPicker extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts index 0e29a8d8fc..a6e1fb1d4a 100644 --- a/src/components/ha-combo-box.ts +++ b/src/components/ha-combo-box.ts @@ -96,6 +96,8 @@ export class HaComboBox extends LitElement { @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight; + private _overlayMutationObserver?: MutationObserver; + public open() { this.updateComplete.then(() => { this._comboBox?.open(); @@ -108,6 +110,14 @@ export class HaComboBox extends LitElement { }); } + public disconnectedCallback() { + super.disconnectedCallback(); + if (this._overlayMutationObserver) { + this._overlayMutationObserver.disconnect(); + this._overlayMutationObserver = undefined; + } + } + public get selectedItem() { return this._comboBox.selectedItem; } @@ -194,12 +204,57 @@ export class HaComboBox extends LitElement { } private _openedChanged(ev: PolymerChangedEvent) { + const opened = ev.detail.value; // delay this so we can handle click event before setting _opened setTimeout(() => { - this._opened = ev.detail.value; + this._opened = opened; }, 0); // @ts-ignore fireEvent(this, ev.type, ev.detail); + + if ( + opened && + "MutationObserver" in window && + !this._overlayMutationObserver + ) { + const overlay = document.querySelector( + "vaadin-combo-box-overlay" + ); + + if (!overlay) { + return; + } + + this._overlayMutationObserver = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if ( + mutation.type === "attributes" && + mutation.attributeName === "inert" && + // @ts-expect-error + overlay.inert === true + ) { + // @ts-expect-error + overlay.inert = false; + this._overlayMutationObserver?.disconnect(); + this._overlayMutationObserver = undefined; + } else if (mutation.type === "childList") { + mutation.removedNodes.forEach((node) => { + if (node.nodeName === "VAADIN-COMBO-BOX-OVERLAY") { + this._overlayMutationObserver?.disconnect(); + this._overlayMutationObserver = undefined; + } + }); + } + }); + }); + + this._overlayMutationObserver.observe(overlay, { + attributes: true, + }); + this._overlayMutationObserver.observe(document.body, { + childList: true, + }); + } } private _filterChanged(ev: PolymerChangedEvent) { diff --git a/src/panels/config/application_credentials/dialog-add-application-credential.ts b/src/panels/config/application_credentials/dialog-add-application-credential.ts index 9face54d7e..516b762806 100644 --- a/src/panels/config/application_credentials/dialog-add-application-credential.ts +++ b/src/panels/config/application_credentials/dialog-add-application-credential.ts @@ -14,7 +14,6 @@ import { ApplicationCredential, } from "../../../data/application_credential"; import { domainToName } from "../../../data/integration"; -import { PolymerChangedEvent } from "../../../polymer-types"; import { haStyleDialog } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; import { AddApplicationCredentialDialogParams } from "./show-dialog-add-application-credential"; @@ -169,11 +168,9 @@ export class DialogAddApplicationCredential extends LitElement { fireEvent(this, "dialog-closed", { dialog: this.localName }); } - private async _handleDomainPicked(ev: PolymerChangedEvent) { - const target = ev.target as any; - if (target.selectedItem) { - this._domain = target.selectedItem.id; - } + private async _handleDomainPicked(ev: CustomEvent) { + ev.stopPropagation(); + this._domain = ev.detail.value; } private _handleValueChanged(ev: CustomEvent) { diff --git a/yarn.lock b/yarn.lock index ddab37b733..492b213e6e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3246,7 +3246,7 @@ __metadata: languageName: node linkType: hard -"@polymer/iron-resizable-behavior@npm:^3.0.0, @polymer/iron-resizable-behavior@npm:^3.0.0-pre.26, @polymer/iron-resizable-behavior@npm:^3.0.1": +"@polymer/iron-resizable-behavior@npm:^3.0.0-pre.26, @polymer/iron-resizable-behavior@npm:^3.0.1": version: 3.0.1 resolution: "@polymer/iron-resizable-behavior@npm:3.0.1" dependencies: @@ -4196,87 +4196,86 @@ __metadata: languageName: node linkType: hard -"@vaadin/combo-box@npm:^22.0.4": - version: 22.0.4 - resolution: "@vaadin/combo-box@npm:22.0.4" +"@vaadin/combo-box@npm:^23.0.10": + version: 23.0.10 + resolution: "@vaadin/combo-box@npm:23.0.10" dependencies: "@open-wc/dedupe-mixin": ^1.3.0 - "@polymer/iron-resizable-behavior": ^3.0.0 "@polymer/polymer": ^3.0.0 - "@vaadin/component-base": ^22.0.4 - "@vaadin/field-base": ^22.0.4 - "@vaadin/input-container": ^22.0.4 - "@vaadin/item": ^22.0.4 - "@vaadin/vaadin-lumo-styles": ^22.0.4 - "@vaadin/vaadin-material-styles": ^22.0.4 - "@vaadin/vaadin-overlay": ^22.0.4 - "@vaadin/vaadin-themable-mixin": ^22.0.4 - checksum: a3cde710d1187bba8e9e7eeb7f6397e6e1158befa3412c3aa684b3b45a1425cdee28d408d5e4dc4f586e1f6881db8850fc51c38f4658c4eb65c51a26a9623c56 + "@vaadin/component-base": ^23.0.10 + "@vaadin/field-base": ^23.0.10 + "@vaadin/input-container": ^23.0.10 + "@vaadin/item": ^23.0.10 + "@vaadin/vaadin-lumo-styles": ^23.0.10 + "@vaadin/vaadin-material-styles": ^23.0.10 + "@vaadin/vaadin-overlay": ^23.0.10 + "@vaadin/vaadin-themable-mixin": ^23.0.10 + checksum: daaa0bd0cc0e8f1622417bd311e389f860c76d31fe8885f23fcdd486ff966a0945d6fe504f8d7251ec1ec54b95ef66b52d8a9e9e03ec21791bb6ca8b7f24efeb languageName: node linkType: hard -"@vaadin/component-base@npm:^22.0.4": - version: 22.0.4 - resolution: "@vaadin/component-base@npm:22.0.4" +"@vaadin/component-base@npm:^23.0.10": + version: 23.0.10 + resolution: "@vaadin/component-base@npm:23.0.10" dependencies: "@open-wc/dedupe-mixin": ^1.3.0 "@polymer/polymer": ^3.0.0 "@vaadin/vaadin-development-mode-detector": ^2.0.0 "@vaadin/vaadin-usage-statistics": ^2.1.0 lit: ^2.0.0 - checksum: d18e7cebdd2928e33641ee035927540239e8a65d23521aca2e35d9992a44060d951e877af09088de0ffa88daa11f86a02b86a087cb29b51d9ada574009159509 + checksum: 2b4d851999aad9dc8e1131d66924e26db64ce5a61d2c895bdf00c8daef774a651f5c2d5ade7274d3c7a1b8286170ee21a7ef873547895e0ceef4f7a7e07073a7 languageName: node linkType: hard -"@vaadin/field-base@npm:^22.0.4": - version: 22.0.4 - resolution: "@vaadin/field-base@npm:22.0.4" +"@vaadin/field-base@npm:^23.0.10": + version: 23.0.10 + resolution: "@vaadin/field-base@npm:23.0.10" dependencies: "@open-wc/dedupe-mixin": ^1.3.0 "@polymer/polymer": ^3.0.0 - "@vaadin/component-base": ^22.0.4 + "@vaadin/component-base": ^23.0.10 lit: ^2.0.0 - checksum: 4ca54ea3efd1bad2cea6ada97484e24f77f7ebb2ab5da7de5b9b7949d624b049d357c7f6f69206f1f10023b1711dc7b8bde9f6dfad774578efec00e1907c4763 + checksum: 0f8d631af00a8268997beed8bde3f6080482eaf044577fd0df0b518fe06b90cbfa6f5c1b2b6e054171de652914d5596749484e4eaecff9754aef70760f25f493 languageName: node linkType: hard -"@vaadin/icon@npm:^22.0.4": - version: 22.0.4 - resolution: "@vaadin/icon@npm:22.0.4" +"@vaadin/icon@npm:^23.0.10": + version: 23.0.10 + resolution: "@vaadin/icon@npm:23.0.10" dependencies: "@polymer/polymer": ^3.0.0 - "@vaadin/component-base": ^22.0.4 - "@vaadin/vaadin-lumo-styles": ^22.0.4 - "@vaadin/vaadin-themable-mixin": ^22.0.4 + "@vaadin/component-base": ^23.0.10 + "@vaadin/vaadin-lumo-styles": ^23.0.10 + "@vaadin/vaadin-themable-mixin": ^23.0.10 lit: ^2.0.0 - checksum: 65e5195a8eb6f8ce24471c3f52ffdd7edc49249e39922e945eb8f02fc2b277d8d527a1538241b9660ca568a87663912b1be9c82fa8a841f286e713630d52f3db + checksum: 1b7da9116ac649796e7852572280be67176fd609c46f37cb1f35fdd1daba0d44ac4c81642de07104c16580b9165f1f05af15c15c3828c95bc9d795b3050b31a1 languageName: node linkType: hard -"@vaadin/input-container@npm:^22.0.4": - version: 22.0.4 - resolution: "@vaadin/input-container@npm:22.0.4" +"@vaadin/input-container@npm:^23.0.10": + version: 23.0.10 + resolution: "@vaadin/input-container@npm:23.0.10" dependencies: "@polymer/polymer": ^3.0.0 - "@vaadin/component-base": ^22.0.4 - "@vaadin/vaadin-lumo-styles": ^22.0.4 - "@vaadin/vaadin-material-styles": ^22.0.4 - "@vaadin/vaadin-themable-mixin": ^22.0.4 - checksum: 718cb7d8f715427d9085feee8a0df987440511059c5bbfcaa80d63ecd989a693f8f50af9da0f483555396aece21b75eff280921eda7cf0b6358e67518e53ba85 + "@vaadin/component-base": ^23.0.10 + "@vaadin/vaadin-lumo-styles": ^23.0.10 + "@vaadin/vaadin-material-styles": ^23.0.10 + "@vaadin/vaadin-themable-mixin": ^23.0.10 + checksum: 2a21486ef0d4618bf890823bae2471a4e476cf37d5b53059c80e0516acc34990dd0a627751b17ea3ab7eb3040dd343b222b9984d734bd07985a6b9f441015aa3 languageName: node linkType: hard -"@vaadin/item@npm:^22.0.4": - version: 22.0.4 - resolution: "@vaadin/item@npm:22.0.4" +"@vaadin/item@npm:^23.0.10": + version: 23.0.10 + resolution: "@vaadin/item@npm:23.0.10" dependencies: "@open-wc/dedupe-mixin": ^1.3.0 "@polymer/polymer": ^3.0.0 - "@vaadin/component-base": ^22.0.4 - "@vaadin/vaadin-lumo-styles": ^22.0.4 - "@vaadin/vaadin-material-styles": ^22.0.4 - "@vaadin/vaadin-themable-mixin": ^22.0.4 - checksum: ef8c253668852a129656e083149b3866327dfae8671e30bb1bf78b39f969bd1db74892f090c7632b64fd91c25334f0542ad9dc6848486609de4350da5e5ea44c + "@vaadin/component-base": ^23.0.10 + "@vaadin/vaadin-lumo-styles": ^23.0.10 + "@vaadin/vaadin-material-styles": ^23.0.10 + "@vaadin/vaadin-themable-mixin": ^23.0.10 + checksum: 790fb48a12c37ad20fbb8f498601585006e27e2b78164336932c64071b1a7d34e88541d4f190c5357c32694dc76676d63c22b4c9cee64debecef90ea5f9ebbc5 languageName: node linkType: hard @@ -4287,49 +4286,49 @@ __metadata: languageName: node linkType: hard -"@vaadin/vaadin-lumo-styles@npm:^22.0.4": - version: 22.0.4 - resolution: "@vaadin/vaadin-lumo-styles@npm:22.0.4" +"@vaadin/vaadin-lumo-styles@npm:^23.0.10": + version: 23.0.10 + resolution: "@vaadin/vaadin-lumo-styles@npm:23.0.10" dependencies: "@polymer/iron-icon": ^3.0.0 "@polymer/iron-iconset-svg": ^3.0.0 "@polymer/polymer": ^3.0.0 - "@vaadin/icon": ^22.0.4 - "@vaadin/vaadin-themable-mixin": ^22.0.4 - checksum: 15e9becd675e0d12024fbdfaecedd03f55841f685932ff5cf8a2143641f895309f21b84f378f1fca3af538c3aba26dad81421f05a28f31ad7bb5550ede8a3aea + "@vaadin/icon": ^23.0.10 + "@vaadin/vaadin-themable-mixin": ^23.0.10 + checksum: c2a9c9f9d441bc55f326b267c4953361d64fed4bfe08727e7c3ea1d1598711c18c4e78faedb7ae192ba474b72a6f1521f366be1a9ed80132f83bc400869275c7 languageName: node linkType: hard -"@vaadin/vaadin-material-styles@npm:^22.0.4": - version: 22.0.4 - resolution: "@vaadin/vaadin-material-styles@npm:22.0.4" +"@vaadin/vaadin-material-styles@npm:^23.0.10": + version: 23.0.10 + resolution: "@vaadin/vaadin-material-styles@npm:23.0.10" dependencies: "@polymer/polymer": ^3.0.0 - "@vaadin/vaadin-themable-mixin": ^22.0.4 - checksum: 0e341e03eab9641cc317a9cbf6d57e7d026539d7bc77159226625aad63a379f31cd70da5e02f10a3d79e9fe0cba1b058935beb2c5d98f146bfb9dd45d8634ee6 + "@vaadin/vaadin-themable-mixin": ^23.0.10 + checksum: d2f47272ac6ec3c099a6bebb0d6d861837f5d506b4c1c1ce2fe7d691b1aa8dd944afaaa9c3d4fc51cbee2cfb2efb677a89428fc124a1a4c4cc2b98058a6d2ef7 languageName: node linkType: hard -"@vaadin/vaadin-overlay@npm:^22.0.4": - version: 22.0.4 - resolution: "@vaadin/vaadin-overlay@npm:22.0.4" +"@vaadin/vaadin-overlay@npm:^23.0.10": + version: 23.0.10 + resolution: "@vaadin/vaadin-overlay@npm:23.0.10" dependencies: "@polymer/polymer": ^3.0.0 - "@vaadin/component-base": ^22.0.4 - "@vaadin/vaadin-lumo-styles": ^22.0.4 - "@vaadin/vaadin-material-styles": ^22.0.4 - "@vaadin/vaadin-themable-mixin": ^22.0.4 - checksum: 1b012ff0beac7879da498cf50ee0974d4c3e5637ebea7f7834b9bfc45b9f02e80c61267794c0f3f4e1d4853aa2f35113e1d94bc187d9fe072f37a03eb99f3ab6 + "@vaadin/component-base": ^23.0.10 + "@vaadin/vaadin-lumo-styles": ^23.0.10 + "@vaadin/vaadin-material-styles": ^23.0.10 + "@vaadin/vaadin-themable-mixin": ^23.0.10 + checksum: 25bbca730426a87967ea0648db760b2669a257e46cd2e60cd9506bbfd8c0e7c353fc23063aa338b8feee9f6ed0a763c78a458b79c39d04c34591fdc8e476274c languageName: node linkType: hard -"@vaadin/vaadin-themable-mixin@npm:^22.0.4": - version: 22.0.4 - resolution: "@vaadin/vaadin-themable-mixin@npm:22.0.4" +"@vaadin/vaadin-themable-mixin@npm:^23.0.10": + version: 23.0.10 + resolution: "@vaadin/vaadin-themable-mixin@npm:23.0.10" dependencies: "@open-wc/dedupe-mixin": ^1.3.0 lit: ^2.0.0 - checksum: 0b2dce09626c92b85ff2d2ad48c8130239bf41fd95147a5fd4490cab4767f074ba9d1008d732d9e90b9219cb1ac0509f4a5fc8637eb5847d6d33e14b20552186 + checksum: 056bff097ebc7fe1756c53018272b8b3b9006a53e77bf5ba964cff2f3b43ede52d980352a3bd38bc9eb6889ab85e897dcdc67493e9c0380993afd4fa0f2e7796 languageName: node linkType: hard @@ -9084,8 +9083,8 @@ fsevents@^1.2.7: "@types/webspeechapi": ^0.0.29 "@typescript-eslint/eslint-plugin": ^4.32.0 "@typescript-eslint/parser": ^4.32.0 - "@vaadin/combo-box": ^22.0.4 - "@vaadin/vaadin-themable-mixin": ^22.0.4 + "@vaadin/combo-box": ^23.0.10 + "@vaadin/vaadin-themable-mixin": ^23.0.10 "@vibrant/color": ^3.2.1-alpha.1 "@vibrant/core": ^3.2.1-alpha.1 "@vibrant/quantizer-mmcq": ^3.2.1-alpha.1