diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 108a9450cf93..e73074c59cf7 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -197,6 +197,8 @@ class HaSidebar extends SubscribeMixin(LitElement) { private _mouseLeaveTimeout?: number; + private _touchendTimeout?: number; + private _tooltipHideTimeout?: number; private _recentKeydownActiveUntil = 0; @@ -237,6 +239,18 @@ class HaSidebar extends SubscribeMixin(LitElement) { ]; } + public disconnectedCallback() { + super.disconnectedCallback(); + // clear timeouts + clearTimeout(this._mouseLeaveTimeout); + clearTimeout(this._tooltipHideTimeout); + clearTimeout(this._touchendTimeout); + // set undefined values + this._mouseLeaveTimeout = undefined; + this._tooltipHideTimeout = undefined; + this._touchendTimeout = undefined; + } + protected render() { if (!this.hass) { return nothing; @@ -406,6 +420,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { class="ha-scrollbar" @focusin=${this._listboxFocusIn} @focusout=${this._listboxFocusOut} + @touchend=${this._listboxTouchend} @scroll=${this._listboxScroll} @keydown=${this._listboxKeydown} > @@ -620,6 +635,14 @@ class HaSidebar extends SubscribeMixin(LitElement) { this._hideTooltip(); } + private _listboxTouchend() { + clearTimeout(this._touchendTimeout); + this._touchendTimeout = window.setTimeout(() => { + // Allow 1 second for users to read the tooltip on touch devices + this._hideTooltip(); + }, 1000); + } + @eventOptions({ passive: true, })