work for the #8388

src/global_variables_utils.ts

@@ -49,6 +49,11 @@ export class DomWindowHelper {
     if(!DomWindowHelper.isAvailable()) return;
     window.removeEventListener(type, listener);
   }
+
+  public static matchMedia(mediaQueryString: string): {matches:boolean} | null {
+    if(!DomWindowHelper.isAvailable() || typeof window.matchMedia === "undefined") return null;
+    return window.matchMedia(mediaQueryString);
+  }
 }
 
 export class DomDocumentHelper {

src/utils/devices.ts

@@ -37,12 +37,22 @@ export var mouseInfo = {
   hasMouse: true
 };
 
-const pointerMatches = (typeof matchMedia !== "undefined" && !!matchMedia && matchMedia("(pointer:fine)")) || undefined;
-mouseInfo.hasMouse = !!pointerMatches && !!pointerMatches.matches;
+const matchMediaMethod: MatchMediaMethod = DomWindowHelper.matchMedia;
+mouseInfo.hasMouse = detectMouseSupport(matchMediaMethod);
 
 export let IsTouch = mouseInfo.isTouch;
 
 //for tests
 export function _setIsTouch(val: boolean): void {
   IsTouch = val;
+}
+
+export type MatchMediaMethod = ((query:string) => {matches:boolean} | null) | null;
+export function detectMouseSupport(matchMedia: MatchMediaMethod):boolean {
+  if (!matchMedia) return false;
+
+  const pointerQuery = matchMedia("(pointer:fine)");
+  const hoverQuery = matchMedia("(any-hover:hover)");
+
+  return !!pointerQuery && pointerQuery.matches || !!hoverQuery && hoverQuery.matches;
 }

tests/utilstests.ts

@@ -1,7 +1,7 @@
 import { IAction } from "../src/actions/action";
 import { defaultListCss } from "../src/list";
 import { createSvg, doKey2ClickDown, doKey2ClickUp, sanitizeEditableContent, configConfirmDialog, mergeValues, compareArrays } from "../src/utils/utils";
-import { mouseInfo } from "../src/utils/devices";
+import { mouseInfo, detectMouseSupport, MatchMediaMethod } from "../src/utils/devices";
 import { PopupBaseViewModel } from "../src/popup-view-model";
 import { PopupModel } from "../src/popup";
 import { AnimationBoolean, AnimationGroup, AnimationGroupUtils, AnimationPropertyUtils, AnimationTab, AnimationUtils, IAnimationConsumer, IAnimationGroupConsumer } from "../src/utils/animation";
@@ -239,6 +239,36 @@ QUnit.test(
   }
 );
 
+QUnit.test(
+  "utils: devices: detectMouseSupport",
+  function (assert) {
+    let result;
+
+    let matchMediaFunction: MatchMediaMethod = null;
+    result = detectMouseSupport(matchMediaFunction);
+    assert.equal(result, false, "no matchMedia function");
+
+    matchMediaFunction = ()=> { return null; };
+    result = detectMouseSupport(matchMediaFunction);
+    assert.equal(result, false, "matchMedia might return null at some environments");
+
+    matchMediaFunction = (query:string) => {
+      if (query === "(pointer:fine)") return { matches: true };
+      return { matches: false };
+    };
+    result = detectMouseSupport(matchMediaFunction);
+    assert.equal(result, true, "matchMedia pointer:fine");
+
+    matchMediaFunction = (query:string) => {
+      if (query === "(pointer:fine)") return { matches: false };
+      if (query === "(any-hover:hover)") return { matches: true };
+      return { matches: false };
+    };
+    result = detectMouseSupport(matchMediaFunction);
+    assert.equal(result, true, "matchMedia any-hover:hover");
+  }
+);
+
 QUnit.test(
   "utils: configConfirmDialog",
   function (assert) {