Refactor condition to include a hover match

JamiuShaibu · Feb 15, 2025 · fc43bee · fc43bee
1 parent 11aca1d
commit fc43bee
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-language-selector-lite",
-  "version": "1.2.8",
+  "version": "1.3.1",
   "description": "A lightweight language selector for React applications",
   "main": "dist/LanguageSelector.js",
   "types": "src/index.d.ts",

diff --git a/src/LanguageSelector.jsx b/src/LanguageSelector.jsx
@@ -152,11 +152,15 @@ const LanguageSelector = ({
   useEffect(() => {
     const event = lowerCase(render);
     const buttonElement = activeButtonRef.current;
+
+    // Detect if the device supports hover
+    const canHover = window.matchMedia("(hover: hover)").matches;
     // Detect if the device supports touch
     const isTouchDevice =
       "ontouchstart" in window || navigator.maxTouchPoints > 0;
+
     const renderEvent =
-      event === "onhover" && isTouchDevice ? "onclick" : event;
+      event === "onhover" && (isTouchDevice || !canHover) ? "onclick" : event;
 
     const handleMouseEnter = () => setIsOpenSelector(true);
     const handleMouseLeave = (e) => {