fix(mount): Handle multiple calls to componentDidMount (#191)

Co-authored-by: zoryana94 <zoryanavakh@gmail.com>
hCaptcha · Jan 13, 2025 · f8a9d94 · f8a9d94
1 parent a166bb4
commit f8a9d94
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/src/index.js b/src/index.js
@@ -170,9 +170,14 @@ class HCaptcha extends React.Component {
       this.apiScriptRequested = true;
     }
 
-    renderCaptcha(onReady) {
-      const { isApiReady } = this.state;
-      if (!isApiReady) return;
+    renderCaptcha(onRender) {
+      const { isApiReady, captchaId } = this.state;
+      const { onReady } = this.props;
+
+      // Prevent calling hCaptcha render on two conditions:
+      // • API is not ready
+      // • Component has already been mounted
+      if (!isApiReady || captchaId) return;
 
       const renderParams = Object.assign({
         "open-callback"       : this.handleOpen,
@@ -188,11 +193,12 @@ class HCaptcha extends React.Component {
 
       const hcaptcha = this._hcaptcha;
       //Render hCaptcha widget and provide necessary callbacks - hCaptcha
-      const captchaId = hcaptcha.render(this.ref.current, renderParams);
+      const id = hcaptcha.render(this.ref.current, renderParams);
 
-      this.setState({ isRemoved: false, captchaId }, () => {
+      this.setState({ isRemoved: false, captchaId: id }, () => {
+        onRender && onRender();
         onReady && onReady();
-        this._onReady && this._onReady(captchaId);
+        this._onReady && this._onReady(id);
       });
     }
 
@@ -367,6 +373,17 @@ class HCaptcha extends React.Component {
       }
     }
 
+    close() {
+      const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
+
+      if (!this.isReady()) {
+        return;
+      }
+
+      return hcaptcha.close(captchaId);
+    }
+
     setData (data) {
       const { captchaId } = this.state;
       const hcaptcha = this._hcaptcha;

diff --git a/tests/hcaptcha.spec.js b/tests/hcaptcha.spec.js
@@ -189,12 +189,19 @@ describe("hCaptcha", () => {
         expect(window.hcaptcha.setData.mock.calls[0][1]).toBe(dataObj);
     });
 
-    it("emits onLoad event", () => {
+    it("should emit onLoad event if no hCaptcha ID is stored", () => {
+        instance.state.captchaId = '';
         expect(mockFns.onLoad.mock.calls.length).toBe(0);
         instance.handleOnLoad();
         expect(mockFns.onLoad.mock.calls.length).toBe(1);
     });
 
+    it("should not emit onLoad event if hCapthcha ID is found", () => {
+        instance.handleOnLoad();
+        expect(mockFns.onLoad.mock.calls.length).toBe(0);
+    });
+
+
     it("emits verify with token and eKey", () => {
         expect(mockFns.onVerify.mock.calls.length).toBe(0);
         instance.handleSubmit();
@@ -257,20 +264,18 @@ describe("hCaptcha", () => {
 
     it("should not set id if no id prop is passed", (done) => {
 
-        const onLoad = jest.fn(() => {
+        const onReady = jest.fn(() => {
             expect(instance.state.captchaId).toBe(MOCK_WIDGET_ID);
             done();
         });
 
         instance = ReactTestUtils.renderIntoDocument(
             <HCaptcha
                 sitekey={TEST_PROPS.sitekey}
-                onLoad={onLoad}
+                onReady={onReady}
                 sentry={false}
             />,
         );
-
-        instance.handleOnLoad();
     });