jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-14 04:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix combo box inside dialog (#12805)

Browse Source
This commit is contained in:
Bram Kragten 2022-05-26 22:28:05 +02:00 committed by GitHub
parent 41c61a2895
commit a72fd19b73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 132 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -89,8 +89,8 @@
"@polymer/paper-tooltip": "^3.0.1", "@polymer/paper-tooltip": "^3.0.1",
"@polymer/polymer": "3.4.1", "@polymer/polymer": "3.4.1",
"@thomasloven/round-slider": "0.5.4", "@thomasloven/round-slider": "0.5.4",
"@vaadin/combo-box": "^22.0.4", "@vaadin/combo-box": "^23.0.10",
"@vaadin/vaadin-themable-mixin": "^22.0.4", "@vaadin/vaadin-themable-mixin": "^23.0.10",
"@vibrant/color": "^3.2.1-alpha.1", "@vibrant/color": "^3.2.1-alpha.1",
"@vibrant/core": "^3.2.1-alpha.1", "@vibrant/core": "^3.2.1-alpha.1",
"@vibrant/quantizer-mmcq": "^3.2.1-alpha.1", "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",

1
src/components/entity/ha-entity-picker.ts
View File

@ -31,6 +31,7 @@ const rowRenderer: ComboBoxLitRenderer<HassEntityWithCachedName> = (item) =>
<span>${item.friendly_name}</span> <span>${item.friendly_name}</span>
<span slot="secondary">${item.entity_id}</span> <span slot="secondary">${item.entity_id}</span>
</mwc-list-item>`; </mwc-list-item>`;
@customElement("ha-entity-picker") @customElement("ha-entity-picker")
export class HaEntityPicker extends LitElement { export class HaEntityPicker extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;

57
src/components/ha-combo-box.ts
View File

@ -96,6 +96,8 @@ export class HaComboBox extends LitElement {
@query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight; @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
private _overlayMutationObserver?: MutationObserver;
public open() { public open() {
this.updateComplete.then(() => { this.updateComplete.then(() => {
this._comboBox?.open(); 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() { public get selectedItem() {
return this._comboBox.selectedItem; return this._comboBox.selectedItem;
} }
@ -194,12 +204,57 @@ export class HaComboBox extends LitElement {
} }
private _openedChanged(ev: PolymerChangedEvent<boolean>) { private _openedChanged(ev: PolymerChangedEvent<boolean>) {
const opened = ev.detail.value;
// delay this so we can handle click event before setting _opened // delay this so we can handle click event before setting _opened
setTimeout(() => { setTimeout(() => {
this._opened = ev.detail.value; this._opened = opened;
}, 0); }, 0);
// @ts-ignore // @ts-ignore
fireEvent(this, ev.type, ev.detail); fireEvent(this, ev.type, ev.detail);
if (
opened &&
"MutationObserver" in window &&
!this._overlayMutationObserver
) {
const overlay = document.querySelector<HTMLElement>(
"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<string>) { private _filterChanged(ev: PolymerChangedEvent<string>) {

9
src/panels/config/application_credentials/dialog-add-application-credential.ts
View File

@ -14,7 +14,6 @@ import {
ApplicationCredential, ApplicationCredential,
} from "../../../data/application_credential"; } from "../../../data/application_credential";
import { domainToName } from "../../../data/integration"; import { domainToName } from "../../../data/integration";
import { PolymerChangedEvent } from "../../../polymer-types";
import { haStyleDialog } from "../../../resources/styles"; import { haStyleDialog } from "../../../resources/styles";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { AddApplicationCredentialDialogParams } from "./show-dialog-add-application-credential"; import { AddApplicationCredentialDialogParams } from "./show-dialog-add-application-credential";
@ -169,11 +168,9 @@ export class DialogAddApplicationCredential extends LitElement {
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
} }
private async _handleDomainPicked(ev: PolymerChangedEvent<string>) { private async _handleDomainPicked(ev: CustomEvent) {
const target = ev.target as any; ev.stopPropagation();
if (target.selectedItem) { this._domain = ev.detail.value;
this._domain = target.selectedItem.id;
}
} }
private _handleValueChanged(ev: CustomEvent) { private _handleValueChanged(ev: CustomEvent) {

141
yarn.lock
View File

@ -3246,7 +3246,7 @@ __metadata:
languageName: node languageName: node
linkType: hard 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 version: 3.0.1
resolution: "@polymer/iron-resizable-behavior@npm:3.0.1" resolution: "@polymer/iron-resizable-behavior@npm:3.0.1"
dependencies: dependencies:
@ -4196,87 +4196,86 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@vaadin/combo-box@npm:^22.0.4": "@vaadin/combo-box@npm:^23.0.10":
version: 22.0.4 version: 23.0.10
resolution: "@vaadin/combo-box@npm:22.0.4" resolution: "@vaadin/combo-box@npm:23.0.10"
dependencies: dependencies:
"@open-wc/dedupe-mixin": ^1.3.0 "@open-wc/dedupe-mixin": ^1.3.0
"@polymer/iron-resizable-behavior": ^3.0.0
"@polymer/polymer": ^3.0.0 "@polymer/polymer": ^3.0.0
"@vaadin/component-base": ^22.0.4 "@vaadin/component-base": ^23.0.10
"@vaadin/field-base": ^22.0.4 "@vaadin/field-base": ^23.0.10
"@vaadin/input-container": ^22.0.4 "@vaadin/input-container": ^23.0.10
"@vaadin/item": ^22.0.4 "@vaadin/item": ^23.0.10
"@vaadin/vaadin-lumo-styles": ^22.0.4 "@vaadin/vaadin-lumo-styles": ^23.0.10
"@vaadin/vaadin-material-styles": ^22.0.4 "@vaadin/vaadin-material-styles": ^23.0.10
"@vaadin/vaadin-overlay": ^22.0.4 "@vaadin/vaadin-overlay": ^23.0.10
"@vaadin/vaadin-themable-mixin": ^22.0.4 "@vaadin/vaadin-themable-mixin": ^23.0.10
checksum: a3cde710d1187bba8e9e7eeb7f6397e6e1158befa3412c3aa684b3b45a1425cdee28d408d5e4dc4f586e1f6881db8850fc51c38f4658c4eb65c51a26a9623c56 checksum: daaa0bd0cc0e8f1622417bd311e389f860c76d31fe8885f23fcdd486ff966a0945d6fe504f8d7251ec1ec54b95ef66b52d8a9e9e03ec21791bb6ca8b7f24efeb
languageName: node languageName: node
linkType: hard linkType: hard
"@vaadin/component-base@npm:^22.0.4": "@vaadin/component-base@npm:^23.0.10":
version: 22.0.4 version: 23.0.10
resolution: "@vaadin/component-base@npm:22.0.4" resolution: "@vaadin/component-base@npm:23.0.10"
dependencies: dependencies:
"@open-wc/dedupe-mixin": ^1.3.0 "@open-wc/dedupe-mixin": ^1.3.0
"@polymer/polymer": ^3.0.0 "@polymer/polymer": ^3.0.0
"@vaadin/vaadin-development-mode-detector": ^2.0.0 "@vaadin/vaadin-development-mode-detector": ^2.0.0
"@vaadin/vaadin-usage-statistics": ^2.1.0 "@vaadin/vaadin-usage-statistics": ^2.1.0
lit: ^2.0.0 lit: ^2.0.0
checksum: d18e7cebdd2928e33641ee035927540239e8a65d23521aca2e35d9992a44060d951e877af09088de0ffa88daa11f86a02b86a087cb29b51d9ada574009159509 checksum: 2b4d851999aad9dc8e1131d66924e26db64ce5a61d2c895bdf00c8daef774a651f5c2d5ade7274d3c7a1b8286170ee21a7ef873547895e0ceef4f7a7e07073a7
languageName: node languageName: node
linkType: hard linkType: hard
"@vaadin/field-base@npm:^22.0.4": "@vaadin/field-base@npm:^23.0.10":
version: 22.0.4 version: 23.0.10
resolution: "@vaadin/field-base@npm:22.0.4" resolution: "@vaadin/field-base@npm:23.0.10"
dependencies: dependencies:
"@open-wc/dedupe-mixin": ^1.3.0 "@open-wc/dedupe-mixin": ^1.3.0
"@polymer/polymer": ^3.0.0 "@polymer/polymer": ^3.0.0
"@vaadin/component-base": ^22.0.4 "@vaadin/component-base": ^23.0.10
lit: ^2.0.0 lit: ^2.0.0
checksum: 4ca54ea3efd1bad2cea6ada97484e24f77f7ebb2ab5da7de5b9b7949d624b049d357c7f6f69206f1f10023b1711dc7b8bde9f6dfad774578efec00e1907c4763 checksum: 0f8d631af00a8268997beed8bde3f6080482eaf044577fd0df0b518fe06b90cbfa6f5c1b2b6e054171de652914d5596749484e4eaecff9754aef70760f25f493
languageName: node languageName: node
linkType: hard linkType: hard
"@vaadin/icon@npm:^22.0.4": "@vaadin/icon@npm:^23.0.10":
version: 22.0.4 version: 23.0.10
resolution: "@vaadin/icon@npm:22.0.4" resolution: "@vaadin/icon@npm:23.0.10"
dependencies: dependencies:
"@polymer/polymer": ^3.0.0 "@polymer/polymer": ^3.0.0
"@vaadin/component-base": ^22.0.4 "@vaadin/component-base": ^23.0.10
"@vaadin/vaadin-lumo-styles": ^22.0.4 "@vaadin/vaadin-lumo-styles": ^23.0.10
"@vaadin/vaadin-themable-mixin": ^22.0.4 "@vaadin/vaadin-themable-mixin": ^23.0.10
lit: ^2.0.0 lit: ^2.0.0
checksum: 65e5195a8eb6f8ce24471c3f52ffdd7edc49249e39922e945eb8f02fc2b277d8d527a1538241b9660ca568a87663912b1be9c82fa8a841f286e713630d52f3db checksum: 1b7da9116ac649796e7852572280be67176fd609c46f37cb1f35fdd1daba0d44ac4c81642de07104c16580b9165f1f05af15c15c3828c95bc9d795b3050b31a1
languageName: node languageName: node
linkType: hard linkType: hard
"@vaadin/input-container@npm:^22.0.4": "@vaadin/input-container@npm:^23.0.10":
version: 22.0.4 version: 23.0.10
resolution: "@vaadin/input-container@npm:22.0.4" resolution: "@vaadin/input-container@npm:23.0.10"
dependencies: dependencies:
"@polymer/polymer": ^3.0.0 "@polymer/polymer": ^3.0.0
"@vaadin/component-base": ^22.0.4 "@vaadin/component-base": ^23.0.10
"@vaadin/vaadin-lumo-styles": ^22.0.4 "@vaadin/vaadin-lumo-styles": ^23.0.10
"@vaadin/vaadin-material-styles": ^22.0.4 "@vaadin/vaadin-material-styles": ^23.0.10
"@vaadin/vaadin-themable-mixin": ^22.0.4 "@vaadin/vaadin-themable-mixin": ^23.0.10
checksum: 718cb7d8f715427d9085feee8a0df987440511059c5bbfcaa80d63ecd989a693f8f50af9da0f483555396aece21b75eff280921eda7cf0b6358e67518e53ba85 checksum: 2a21486ef0d4618bf890823bae2471a4e476cf37d5b53059c80e0516acc34990dd0a627751b17ea3ab7eb3040dd343b222b9984d734bd07985a6b9f441015aa3
languageName: node languageName: node
linkType: hard linkType: hard
"@vaadin/item@npm:^22.0.4": "@vaadin/item@npm:^23.0.10":
version: 22.0.4 version: 23.0.10
resolution: "@vaadin/item@npm:22.0.4" resolution: "@vaadin/item@npm:23.0.10"
dependencies: dependencies:
"@open-wc/dedupe-mixin": ^1.3.0 "@open-wc/dedupe-mixin": ^1.3.0
"@polymer/polymer": ^3.0.0 "@polymer/polymer": ^3.0.0
"@vaadin/component-base": ^22.0.4 "@vaadin/component-base": ^23.0.10
"@vaadin/vaadin-lumo-styles": ^22.0.4 "@vaadin/vaadin-lumo-styles": ^23.0.10
"@vaadin/vaadin-material-styles": ^22.0.4 "@vaadin/vaadin-material-styles": ^23.0.10
"@vaadin/vaadin-themable-mixin": ^22.0.4 "@vaadin/vaadin-themable-mixin": ^23.0.10
checksum: ef8c253668852a129656e083149b3866327dfae8671e30bb1bf78b39f969bd1db74892f090c7632b64fd91c25334f0542ad9dc6848486609de4350da5e5ea44c checksum: 790fb48a12c37ad20fbb8f498601585006e27e2b78164336932c64071b1a7d34e88541d4f190c5357c32694dc76676d63c22b4c9cee64debecef90ea5f9ebbc5
languageName: node languageName: node
linkType: hard linkType: hard
@ -4287,49 +4286,49 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@vaadin/vaadin-lumo-styles@npm:^22.0.4": "@vaadin/vaadin-lumo-styles@npm:^23.0.10":
version: 22.0.4 version: 23.0.10
resolution: "@vaadin/vaadin-lumo-styles@npm:22.0.4" resolution: "@vaadin/vaadin-lumo-styles@npm:23.0.10"
dependencies: dependencies:
"@polymer/iron-icon": ^3.0.0 "@polymer/iron-icon": ^3.0.0
"@polymer/iron-iconset-svg": ^3.0.0 "@polymer/iron-iconset-svg": ^3.0.0
"@polymer/polymer": ^3.0.0 "@polymer/polymer": ^3.0.0
"@vaadin/icon": ^22.0.4 "@vaadin/icon": ^23.0.10
"@vaadin/vaadin-themable-mixin": ^22.0.4 "@vaadin/vaadin-themable-mixin": ^23.0.10
checksum: 15e9becd675e0d12024fbdfaecedd03f55841f685932ff5cf8a2143641f895309f21b84f378f1fca3af538c3aba26dad81421f05a28f31ad7bb5550ede8a3aea checksum: c2a9c9f9d441bc55f326b267c4953361d64fed4bfe08727e7c3ea1d1598711c18c4e78faedb7ae192ba474b72a6f1521f366be1a9ed80132f83bc400869275c7
languageName: node languageName: node
linkType: hard linkType: hard
"@vaadin/vaadin-material-styles@npm:^22.0.4": "@vaadin/vaadin-material-styles@npm:^23.0.10":
version: 22.0.4 version: 23.0.10
resolution: "@vaadin/vaadin-material-styles@npm:22.0.4" resolution: "@vaadin/vaadin-material-styles@npm:23.0.10"
dependencies: dependencies:
"@polymer/polymer": ^3.0.0 "@polymer/polymer": ^3.0.0
"@vaadin/vaadin-themable-mixin": ^22.0.4 "@vaadin/vaadin-themable-mixin": ^23.0.10
checksum: 0e341e03eab9641cc317a9cbf6d57e7d026539d7bc77159226625aad63a379f31cd70da5e02f10a3d79e9fe0cba1b058935beb2c5d98f146bfb9dd45d8634ee6 checksum: d2f47272ac6ec3c099a6bebb0d6d861837f5d506b4c1c1ce2fe7d691b1aa8dd944afaaa9c3d4fc51cbee2cfb2efb677a89428fc124a1a4c4cc2b98058a6d2ef7
languageName: node languageName: node
linkType: hard linkType: hard
"@vaadin/vaadin-overlay@npm:^22.0.4": "@vaadin/vaadin-overlay@npm:^23.0.10":
version: 22.0.4 version: 23.0.10
resolution: "@vaadin/vaadin-overlay@npm:22.0.4" resolution: "@vaadin/vaadin-overlay@npm:23.0.10"
dependencies: dependencies:
"@polymer/polymer": ^3.0.0 "@polymer/polymer": ^3.0.0
"@vaadin/component-base": ^22.0.4 "@vaadin/component-base": ^23.0.10
"@vaadin/vaadin-lumo-styles": ^22.0.4 "@vaadin/vaadin-lumo-styles": ^23.0.10
"@vaadin/vaadin-material-styles": ^22.0.4 "@vaadin/vaadin-material-styles": ^23.0.10
"@vaadin/vaadin-themable-mixin": ^22.0.4 "@vaadin/vaadin-themable-mixin": ^23.0.10
checksum: 1b012ff0beac7879da498cf50ee0974d4c3e5637ebea7f7834b9bfc45b9f02e80c61267794c0f3f4e1d4853aa2f35113e1d94bc187d9fe072f37a03eb99f3ab6 checksum: 25bbca730426a87967ea0648db760b2669a257e46cd2e60cd9506bbfd8c0e7c353fc23063aa338b8feee9f6ed0a763c78a458b79c39d04c34591fdc8e476274c
languageName: node languageName: node
linkType: hard linkType: hard
"@vaadin/vaadin-themable-mixin@npm:^22.0.4": "@vaadin/vaadin-themable-mixin@npm:^23.0.10":
version: 22.0.4 version: 23.0.10
resolution: "@vaadin/vaadin-themable-mixin@npm:22.0.4" resolution: "@vaadin/vaadin-themable-mixin@npm:23.0.10"
dependencies: dependencies:
"@open-wc/dedupe-mixin": ^1.3.0 "@open-wc/dedupe-mixin": ^1.3.0
lit: ^2.0.0 lit: ^2.0.0
checksum: 0b2dce09626c92b85ff2d2ad48c8130239bf41fd95147a5fd4490cab4767f074ba9d1008d732d9e90b9219cb1ac0509f4a5fc8637eb5847d6d33e14b20552186 checksum: 056bff097ebc7fe1756c53018272b8b3b9006a53e77bf5ba964cff2f3b43ede52d980352a3bd38bc9eb6889ab85e897dcdc67493e9c0380993afd4fa0f2e7796
languageName: node languageName: node
linkType: hard linkType: hard
@ -9084,8 +9083,8 @@ fsevents@^1.2.7:
"@types/webspeechapi": ^0.0.29 "@types/webspeechapi": ^0.0.29
"@typescript-eslint/eslint-plugin": ^4.32.0 "@typescript-eslint/eslint-plugin": ^4.32.0
"@typescript-eslint/parser": ^4.32.0 "@typescript-eslint/parser": ^4.32.0
"@vaadin/combo-box": ^22.0.4 "@vaadin/combo-box": ^23.0.10
"@vaadin/vaadin-themable-mixin": ^22.0.4 "@vaadin/vaadin-themable-mixin": ^23.0.10
"@vibrant/color": ^3.2.1-alpha.1 "@vibrant/color": ^3.2.1-alpha.1
"@vibrant/core": ^3.2.1-alpha.1 "@vibrant/core": ^3.2.1-alpha.1
"@vibrant/quantizer-mmcq": ^3.2.1-alpha.1 "@vibrant/quantizer-mmcq": ^3.2.1-alpha.1