Fix hide sidebar tooltip on touchend events

[elchininet]

Proposed change

The sidebar's tooltips do not disappear in touch devices (reported here and here). After tapping on an item the relative tooltip appears and it doesn't disappear until one taps on another part of the screen. This is due to the fact that tooltips appear on focusin and mouseenter events and are removed on focusout and mouseleave events. In desktop devices, this is not an issue because once one moves the mouse out of the item, the respective tooltip disappears. But in touch devices (mainly tablets because in mobile devices the sidebar gets hidden), the items get focus once tapped but they do not lose the focus until one taps in another part of the screen and there is no mouseleave in these devices.

In this pull request this is fixed adding a touchend event to the ha-md-list element which executes the removal of the tooltip. The removal of the tooltip is done with a delay to allow its text to be read.

Before

Record_2025-11-22-03-00-54_40deb401b9ffe8e1df2f1cc5ba480b12.2.mp4

After

Record_2025-11-22-02-55-59_40deb401b9ffe8e1df2f1cc5ba480b12.2.mp4

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[Copilot]

Pull request overview

This PR fixes an issue where sidebar tooltips persist indefinitely on touch devices (primarily tablets) after tapping a sidebar item. The tooltip remains visible until the user taps elsewhere on the screen because touch devices don't trigger mouseleave events and the focused item doesn't lose focus automatically.

Key Changes

• Added _touchendTimeout property to track the touchend-triggered hide timeout
• Added @touchend event handler to ha-md-list element that hides tooltips after a 1-second delay
• Implemented _listboxTouchend() method to handle the touchend event with a delayed tooltip hide

Comments suppressed due to low confidence (1)

src/components/ha-sidebar.ts:669

• The _touchendTimeout should be cleared in _listboxScroll to prevent a delayed _hideTooltip() call after the user has scrolled. When scrolling occurs, the tooltip should hide immediately without waiting for the touchend timeout to complete.

Consider updating the method:

@eventOptions({
  passive: true,
})
private _listboxScroll() {
  // On keypresses on the listbox, we're going to ignore scroll events
  // for 100ms so that if pressing down arrow scrolls the sidebar, the tooltip
  // will not be hidden.
  if (new Date().getTime() < this._recentKeydownActiveUntil) {
    return;
  }
  if (this._touchendTimeout) {
    clearTimeout(this._touchendTimeout);
    this._touchendTimeout = undefined;
  }
  this._hideTooltip();
}

  @eventOptions({
    passive: true,
  })
  private _listboxScroll() {
    // On keypresses on the listbox, we're going to ignore scroll events
    // for 100ms so that if pressing down arrow scrolls the sidebar, the tooltip
    // will not be hidden.
    if (new Date().getTime() < this._recentKeydownActiveUntil) {
      return;
    }
    this._hideTooltip();
  }