STSCOM-895: Make useClickOutside catch click event on capture phase (#…

…1665)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change history for stripes-components
 
+## IN PROGRESS
+
+* Make `useClickOutside` click handler work on `capture` event phase. Refs STCOM-895.
+
 ## [10.0.2](https://github.com/folio-org/stripes-components/tree/v10.0.2) (2021-11-15)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v10.0.1...v10.0.2)
 

hooks/tests/useClickOutside-test.js

@@ -34,7 +34,13 @@ describe('useClickOutside', () => {
 
     return (
       <div ref={content}>
-        <span id="click-inside-element">Inside element</span>
+        <button
+          id="click-inside-element"
+          type="button"
+          onClick={(e) => e.target.parentNode.removeChild(e.target)}
+        >
+          Inside element
+        </button>
       </div>
     );
   };
@@ -73,4 +79,14 @@ describe('useClickOutside', () => {
       expect(onClickSpy.calledOnceWith(false)).to.be.true;
     });
   });
+
+  describe('when other click handler removes click target from DOM', () => {
+    beforeEach(async () => {
+      await useClickOutsideInteractor.clickInsideElement();
+    });
+
+    it('should still give correct results', () => {
+      expect(onClickSpy.calledOnceWith(false)).to.be.true;
+    });
+  });
 });

hooks/useClickOutside/useClickOutside.js

@@ -7,9 +7,12 @@ const useClickOutside = (ref, onClick) => {
       onClick(e, isOutside);
     };
 
-    document.addEventListener('click', handleClick);
+    // need to catch event in capture phase to process click event before other handlers
+    // this is to fix a case when other click handler might remove e.target from DOM
+    // and when this handler runs - `contains` will return false because e.target is no longer in DOM
+    document.addEventListener('click', handleClick, true);
     return () => {
-      document.removeEventListener('click', handleClick);
+      document.removeEventListener('click', handleClick, true);
     };
   }, [ref, onClick]);
 };