From d0041d05f128dbd97a8f9349c068059aae1b355f Mon Sep 17 00:00:00 2001
From: Gadi Piperno Corcos <gadi@skyriseltd.com>
Date: Tue, 1 Mar 2022 14:52:59 +0100
Subject: [PATCH] Fix: async property of scripts is not assigned properly

---
 src/HelmetConstants.js        |  3 ++-
 src/HelmetUtils.js            |  8 ++++++++
 test/HelmetDeclarativeTest.js | 29 +++++++++++++++++++++++++++++
 test/HelmetTest.js            | 29 +++++++++++++++++++++++++++++
 4 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/src/HelmetConstants.js b/src/HelmetConstants.js
index 7078dfb7..aff41171 100644
--- a/src/HelmetConstants.js
+++ b/src/HelmetConstants.js
@@ -30,7 +30,8 @@ export const TAG_PROPERTIES = {
     PROPERTY: "property",
     REL: "rel",
     SRC: "src",
-    TARGET: "target"
+    TARGET: "target",
+    ASYNC: "async"
 };
 
 export const REACT_TAG_MAP = {
diff --git a/src/HelmetUtils.js b/src/HelmetUtils.js
index 5d072220..fd0f4af6 100644
--- a/src/HelmetUtils.js
+++ b/src/HelmetUtils.js
@@ -454,6 +454,14 @@ const updateTags = (type, tags) => {
                                 : tag[attribute];
                         newElement.setAttribute(attribute, value);
                     }
+
+                    // The async attribute is ignored on dynamic scripts, the property must be set directly
+                    if (
+                        attribute === TAG_PROPERTIES.ASYNC &&
+                        typeof tag.async === "boolean"
+                    ) {
+                        newElement.async = tag.async;
+                    }
                 }
             }
 
diff --git a/test/HelmetDeclarativeTest.js b/test/HelmetDeclarativeTest.js
index 086f35c2..dd8d1151 100644
--- a/test/HelmetDeclarativeTest.js
+++ b/test/HelmetDeclarativeTest.js
@@ -3732,5 +3732,34 @@ describe("Helmet - Declarative API", () => {
                 done();
             });
         });
+
+        it("correctly assigns the async property to a script tag", done => {
+            const spy = sinon.spy();
+            ReactDOM.render(
+                <Helmet
+                    script={[
+                        {
+                            src: "http://localhost/test.js",
+                            type: "text/javascript",
+                            async: false
+                        }
+                    ]}
+                    onChangeClientState={spy}
+                />,
+                container
+            );
+
+            requestAnimationFrame(() => {
+                expect(spy.called).to.equal(true);
+
+                const [, addedTags] = spy.getCall(0).args;
+
+                expect(addedTags).to.have.property("scriptTags");
+                expect(addedTags.scriptTags).to.have.deep.property("[0]");
+                expect(addedTags.scriptTags[0].async).to.equal(false);
+
+                done();
+            });
+        });
     });
 });
diff --git a/test/HelmetTest.js b/test/HelmetTest.js
index 7c714d87..2e162742 100644
--- a/test/HelmetTest.js
+++ b/test/HelmetTest.js
@@ -3399,5 +3399,34 @@ describe("Helmet", () => {
                 done();
             });
         });
+
+        it("correctly assigns the async property to a script tag", done => {
+            const spy = sinon.spy();
+            ReactDOM.render(
+                <Helmet
+                    script={[
+                        {
+                            src: "http://localhost/test.js",
+                            type: "text/javascript",
+                            async: false
+                        }
+                    ]}
+                    onChangeClientState={spy}
+                />,
+                container
+            );
+
+            requestAnimationFrame(() => {
+                expect(spy.called).to.equal(true);
+
+                const [, addedTags] = spy.getCall(0).args;
+
+                expect(addedTags).to.have.property("scriptTags");
+                expect(addedTags.scriptTags).to.have.deep.property("[0]");
+                expect(addedTags.scriptTags[0].async).to.equal(false);
+
+                done();
+            });
+        });
     });
 });