main 🧊 rework click outside

Author: debabin

src/hooks/useClickOutside/useClickOutside.demo.tsx

@@ -10,24 +10,30 @@ const Demo = () => {
   });
 
   return (
-    <div
-      ref={clickOutsideRef}
-      style={{
-        width: 200,
-        height: 200,
-        display: 'flex',
-        userSelect: 'none',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        border: `1px solid ${counter.value < 5 ? 'red' : 'green'}`
-      }}
-    >
-      <p>Click more than 5 times:</p>
-      <p>
-        <code>{counter.value}</code>
-      </p>
+    <div>
+      <p>Click more than five times: <code>{counter.value}</code></p>
+
+
+      <div
+        ref={clickOutsideRef}
+        style={{
+          padding: '50px 25px',
+          position: 'relative',
+          display: 'flex',
+          userSelect: 'none',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          borderRadius: '10px',
+          alignItems: 'center',
+          border: `1.5px solid ${counter.value < 5 ? 'red' : 'green'}`
+        }}
+      >
+        {counter.value <= 5 && 'Click outside'}
+        {counter.value > 5 && counter.value <= 25 && 'Nice work'}
+        {counter.value > 25 && 'That are a lot of clicks'}
+      </div>
     </div>
+
   );
 };
 

src/hooks/useClickOutside/useClickOutside.test.ts

@@ -17,12 +17,9 @@ it('Should call callback when ref connected to the document', () => {
 
   expect(callback).not.toBeCalled();
 
-  act(() => {
-    document.dispatchEvent(new Event('mousedown'));
-    document.dispatchEvent(new Event('touchstart'));
-  });
+  act(() => document.dispatchEvent(new Event('click')));
 
-  expect(callback).toBeCalledTimes(2);
+  expect(callback).toBeCalledTimes(1);
 });
 
 it('Should call callback when clicked outside the element', () => {
@@ -33,12 +30,9 @@ it('Should call callback when clicked outside the element', () => {
 
   expect(callback).not.toBeCalled();
 
-  act(() => {
-    document.dispatchEvent(new Event('mousedown'));
-    document.dispatchEvent(new Event('touchstart'));
-  });
+  act(() => document.dispatchEvent(new Event('click')));
 
-  expect(callback).toBeCalledTimes(2);
+  expect(callback).toBeCalledTimes(1);
 });
 
 it('Should call callback when clicked outside the ref', () => {
@@ -49,12 +43,9 @@ it('Should call callback when clicked outside the ref', () => {
 
   expect(callback).not.toBeCalled();
 
-  act(() => {
-    document.dispatchEvent(new Event('mousedown'));
-    document.dispatchEvent(new Event('touchstart'));
-  });
+  act(() => document.dispatchEvent(new Event('click')));
 
-  expect(callback).toBeCalledTimes(2);
+  expect(callback).toBeCalledTimes(1);
 });
 
 it('Should call callback when clicked outside the function that returns an element', () => {
@@ -65,12 +56,9 @@ it('Should call callback when clicked outside the function that returns an eleme
 
   expect(callback).not.toBeCalled();
 
-  act(() => {
-    document.dispatchEvent(new Event('mousedown'));
-    document.dispatchEvent(new Event('touchstart'));
-  });
+  act(() => document.dispatchEvent(new Event('click')));
 
-  expect(callback).toBeCalledTimes(2);
+  expect(callback).toBeCalledTimes(1);
 });
 
 it('Should not call callback when clicked inside the ref', () => {
@@ -80,10 +68,7 @@ it('Should not call callback when clicked inside the ref', () => {
 
   renderHook(() => useClickOutside(ref, callback));
 
-  act(() => {
-    ref.current.dispatchEvent(new Event('mousedown'));
-    ref.current.dispatchEvent(new Event('touchstart'));
-  });
+  act(() => ref.current.dispatchEvent(new Event('click')));
 
   expect(callback).not.toBeCalled();
 });
@@ -96,10 +81,7 @@ it('Should not call callback when clicked inside the element', () => {
 
   renderHook(() => useClickOutside(element, callback));
 
-  act(() => {
-    element.dispatchEvent(new Event('mousedown'));
-    element.dispatchEvent(new Event('touchstart'));
-  });
+  act(() => element.dispatchEvent(new Event('click')));
 
   expect(callback).not.toBeCalled();
 });
@@ -113,10 +95,7 @@ it('Should not call callback when clicked inside the function that returns an el
 
   renderHook(() => useClickOutside(getElement, callback));
 
-  act(() => {
-    element.dispatchEvent(new Event('mousedown'));
-    element.dispatchEvent(new Event('touchstart'));
-  });
+  act(() => element.dispatchEvent(new Event('click')));
 
   expect(callback).not.toBeCalled();
 });
@@ -136,7 +115,7 @@ it('Should call callback when clicked outside the element (multiple targets)', (
 
   renderHook(() => useClickOutside([element, ref, getElement], callback));
 
-  act(() => document.dispatchEvent(new Event('mousedown')));
+  act(() => document.dispatchEvent(new Event('click')));
 
   expect(callback).toBeCalledTimes(1);
 });

src/hooks/useClickOutside/useClickOutside.ts

@@ -17,7 +17,7 @@ export interface UseClickOutside {
     callback: (event: Event) => void
   ): void;
 
-  <Target extends UseClickOutsideTarget | UseClickOutsideTarget[]>(
+  <Target extends UseClickOutsideTarget>(
     callback: (event: Event) => void,
     target?: never
   ): (node: Target) => void;
@@ -43,7 +43,7 @@ export interface UseClickOutside {
  * @returns {(node: Target) => void} A React ref to attach to the target element
  *
  * @example
- * const ref = useClickOutside<HMLDiTvElement>(() => console.log('click outside'));
+ * const ref = useClickOutside<HTMLDivElement>(() => console.log('click outside'));
  */
 export const useClickOutside = ((...params: any[]) => {
   const target = (typeof params[1] === 'undefined' ? undefined : params[0]) as
@@ -79,12 +79,10 @@ export const useClickOutside = ((...params: any[]) => {
       }
     };
 
-    document.addEventListener('mousedown', handler);
-    document.addEventListener('touchstart', handler);
+    document.addEventListener('click', handler);
 
     return () => {
-      document.removeEventListener('mousedown', handler);
-      document.removeEventListener('touchstart', handler);
+      document.removeEventListener('click', handler);
     };
   }, [internalRef, target]);