Remove inert property on combobox overlay when items change (#13928)

This commit is contained in:
Paul Bottein 2022-09-30 14:41:09 +02:00 committed by GitHub
parent 0ec887ad50
commit cd8c1f42ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 8 deletions

View File

@ -8,7 +8,14 @@ import type {
ComboBoxLightValueChangedEvent, ComboBoxLightValueChangedEvent,
} from "@vaadin/combo-box/vaadin-combo-box-light"; } from "@vaadin/combo-box/vaadin-combo-box-light";
import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles"; import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import {
css,
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
} from "lit";
import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit"; import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
@ -225,11 +232,13 @@ export class HaComboBox extends LitElement {
// @ts-ignore // @ts-ignore
fireEvent(this, ev.type, ev.detail); fireEvent(this, ev.type, ev.detail);
if ( if (opened) {
opened && this.removeInertOnOverlay();
"MutationObserver" in window && }
!this._overlayMutationObserver }
) {
private removeInertOnOverlay() {
if ("MutationObserver" in window && !this._overlayMutationObserver) {
const overlay = document.querySelector<HTMLElement>( const overlay = document.querySelector<HTMLElement>(
"vaadin-combo-box-overlay" "vaadin-combo-box-overlay"
); );
@ -268,6 +277,16 @@ export class HaComboBox extends LitElement {
} }
} }
updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (
changedProps.has("filteredItems") ||
(changedProps.has("items") && this.opened)
) {
this.removeInertOnOverlay();
}
}
private _filterChanged(ev: ComboBoxLightFilterChangedEvent) { private _filterChanged(ev: ComboBoxLightFilterChangedEvent) {
// @ts-ignore // @ts-ignore
fireEvent(this, ev.type, ev.detail, { composed: false }); fireEvent(this, ev.type, ev.detail, { composed: false });

View File

@ -13,7 +13,7 @@ type IconItem = {
icon: string; icon: string;
keywords: string[]; keywords: string[];
}; };
let iconItems: IconItem[] = [{ icon: "", keywords: [] }]; let iconItems: IconItem[] = [];
let iconLoaded = false; let iconLoaded = false;
// eslint-disable-next-line lit/prefer-static-styles // eslint-disable-next-line lit/prefer-static-styles

View File

@ -20,7 +20,7 @@ type NavigationItem = {
title: string; title: string;
}; };
const DEFAULT_ITEMS: NavigationItem[] = [{ path: "", icon: "", title: "" }]; const DEFAULT_ITEMS: NavigationItem[] = [];
// eslint-disable-next-line lit/prefer-static-styles // eslint-disable-next-line lit/prefer-static-styles
const rowRenderer: ComboBoxLitRenderer<NavigationItem> = (item) => html` const rowRenderer: ComboBoxLitRenderer<NavigationItem> = (item) => html`