Merge pull request #804 from dermotduffy/drawer-bug

Fix drawer open bug in iOS Safari

src/components/drawer.ts

@@ -13,6 +13,7 @@ import { SideDrawer } from 'side-drawer';
 import drawerInjectStyle from '../scss/drawer-inject.scss';
 import drawerStyle from '../scss/drawer.scss';
 import { stopEventFromActivatingCardWideActions } from '../utils/action';
+import { isHoverableDevice } from '../utils/basic';
 
 @customElement('frigate-card-drawer')
 export class FrigateCardDrawer extends LitElement {
@@ -37,6 +38,8 @@ export class FrigateCardDrawer extends LitElement {
 
   protected _resizeObserver = new ResizeObserver(() => this._hideDrawerIfNecessary());
 
+  protected readonly _isHoverableDevice = isHoverableDevice();
+
   /**
    * Called on the first update.
    * @param changedProps The changed properties.
@@ -110,7 +113,11 @@ export class FrigateCardDrawer extends LitElement {
                   class="control"
                   icon="${this.open ? 'mdi:menu-open' : 'mdi:menu'}"
                   @mouseenter=${() => {
-                    if (!this.open) {
+                    // Only open the drawer on mousenter when the device
+                    // supports hover (otherwise iOS may end up passing on
+                    // subsequent click events to a different element, see:
+                    // https://github.com/dermotduffy/frigate-hass-card/issues/801
+                    if (this._isHoverableDevice && !this.open) {
                       this.open = true;
                     }
                   }}
@@ -131,7 +138,7 @@ export class FrigateCardDrawer extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-		"frigate-card-drawer": FrigateCardDrawer
+    'frigate-card-drawer': FrigateCardDrawer;
-    "side-drawer": SideDrawer,
+    'side-drawer': SideDrawer;
   }
 }

src/components/timeline.ts

@@ -47,7 +47,7 @@ import {
   TimelineConfig,
 } from '../types';
 import { stopEventFromActivatingCardWideActions } from '../utils/action';
-import { dispatchFrigateCardEvent, errorToConsole, prettifyTitle } from '../utils/basic';
+import { dispatchFrigateCardEvent, errorToConsole, isHoverableDevice, prettifyTitle } from '../utils/basic';
 import { getCameraTitle } from '../utils/camera.js';
 import {
   getRecordingSegments,
@@ -548,9 +548,7 @@ export class FrigateCardTimelineCore extends LitElement {
   protected _pointerHeld = false;
   protected _ignoreClick = false;
 
-  protected static _isHoverableDevice = window.matchMedia(
+  protected readonly _isHoverableDevice = isHoverableDevice();
-    '(hover: hover) and (pointer: fine)',
-  ).matches;
 
   /**
    * Get a tooltip for a given timeline event.
@@ -559,7 +557,7 @@ export class FrigateCardTimelineCore extends LitElement {
    */
   protected _getTooltip(item: TimelineItem): string {
     const source = (<FrigateCardTimelineItem>item).source;
-    if (!FrigateCardTimelineCore._isHoverableDevice || !source) {
+    if (!this._isHoverableDevice || !source) {
       // Don't display tooltips on touch devices, they just get in the way of
       // the drawer.
       return '';

src/utils/basic.ts

@@ -77,3 +77,11 @@ export function errorToConsole(e: Error, func?: CallableFunction): void {
     func(e);
   }
 }
+
+/**
+ * Determine if the device supports hovering.
+ * @returns `true` if the device supports hovering, `false` otherwise.
+ */
+export const isHoverableDevice = (): boolean => window.matchMedia(
+  '(hover: hover) and (pointer: fine)',
+).matches;