@openmrs/esm-react-utils 5.3.3-pre.1468 → 5.3.3-pre.1470

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "5.3.3-pre.1468",
+  "version": "5.3.3-pre.1470",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "browser": "dist/openmrs-esm-react-utils.js",
@@ -58,13 +58,13 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "5.3.3-pre.1468",
-    "@openmrs/esm-config": "5.3.3-pre.1468",
-    "@openmrs/esm-error-handling": "5.3.3-pre.1468",
-    "@openmrs/esm-extensions": "5.3.3-pre.1468",
-    "@openmrs/esm-feature-flags": "5.3.3-pre.1468",
-    "@openmrs/esm-globals": "5.3.3-pre.1468",
-    "@openmrs/esm-navigation": "5.3.3-pre.1468",
+    "@openmrs/esm-api": "5.3.3-pre.1470",
+    "@openmrs/esm-config": "5.3.3-pre.1470",
+    "@openmrs/esm-error-handling": "5.3.3-pre.1470",
+    "@openmrs/esm-extensions": "5.3.3-pre.1470",
+    "@openmrs/esm-feature-flags": "5.3.3-pre.1470",
+    "@openmrs/esm-globals": "5.3.3-pre.1470",
+    "@openmrs/esm-navigation": "5.3.3-pre.1470",
     "dayjs": "^1.10.8",
     "i18next": "^21.10.0",
     "react": "^18.1.0",

package/src/useOnClickOutside.test.tsx

@@ -59,6 +59,7 @@ describe('useOnClickOutside', () => {
     ref.unmount();
 
     // verify
-    expect(spy).toHaveBeenCalledWith('click', expect.any(Function));
+    expect(spy).toHaveBeenCalledWith('mousedown', expect.any(Function));
+    expect(spy).toHaveBeenCalledWith('touchstart', expect.any(Function));
   });
 });

package/src/useOnClickOutside.ts

@@ -1,22 +1,27 @@
 /** @module @category UI */
 import { useRef, useEffect } from 'react';
 
-export function useOnClickOutside<T extends HTMLElement = HTMLElement>(handler: (event: Event) => void, active = true) {
+export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+  handler: (event: MouseEvent) => void,
+  active = true,
+) {
   const ref = useRef<T>(null);
 
   useEffect(() => {
-    if (active) {
-      const listener = (event: Event) => {
-        if (ref?.current?.contains(event.target as Node)) {
-          return;
-        }
+    const listener = (event: MouseEvent) => {
+      if (!active || !ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
 
-        handler(event);
-      };
+      handler(event);
+    };
 
-      window.addEventListener(`click`, listener);
-      return () => window.removeEventListener(`click`, listener);
-    }
+    window.addEventListener(`mousedown`, listener);
+    window.addEventListener(`touchstart`, listener);
+    return () => {
+      window.removeEventListener(`mousedown`, listener);
+      window.removeEventListener(`touchstart`, listener);
+    };
   }, [handler, active]);
 
   return ref;