From 00c5d285b44293c6e2e2d834b05a22aa6ed32966 Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Fri, 24 Feb 2023 08:47:18 -0500
Subject: [PATCH] fix: textarea value is being duplicated (#62)

Fix bug introduced in https://github.com/getsentry/rrweb/pull/43 where
we masked both textarea's `value` and `textContent`, which meant the
text inside of the textarea would get duplicated. We can ignore
`textContent` in this case and set it to an empty string.
---
 packages/rrweb-snapshot/src/snapshot.ts       |   17 +-
 packages/rrweb-snapshot/src/utils.ts          |    1 +
 .../__snapshots__/integration.test.ts.snap    |    5 +-
 .../rrweb-snapshot/test/html/form-fields.html |    8 +-
 .../__snapshots__/integration.test.ts.snap    | 1496 ++++++++++++++++-
 packages/rrweb/test/html/empty.html           |   11 +
 packages/rrweb/test/integration.test.ts       |  146 +-
 7 files changed, 1626 insertions(+), 58 deletions(-)
 create mode 100644 packages/rrweb/test/html/empty.html

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 0f2af24876..e60c96fab6 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -718,19 +718,8 @@ function serializeNode(
       }
 
       if (parentTagName === 'TEXTAREA' && textContent) {
-        // Ensure that textContent === attribute.value
-        // (masking options can make them different)
-        // replay will remove duplicate textContent.
-        textContent = maskInputValue({
-          input: n.parentNode as HTMLElement,
-          maskInputSelector,
-          unmaskInputSelector,
-          maskInputOptions,
-          tagName: parentTagName,
-          type: null,
-          value: textContent,
-          maskInputFn,
-        });
+        // textarea textContent should be masked via `value` attributes
+        textContent = '';
       } else if (
         !isStyle &&
         !isScript &&
@@ -1249,4 +1238,4 @@ export default snapshot;
 /** We want to skip `autoplay` attribute, as this has weird results when replaying.  */
 function skipAttribute(tagName: string, attributeName: string, value?: unknown) {
   return (tagName === 'video' || tagName === 'audio') && attributeName === 'autoplay';
-}
\ No newline at end of file
+}
diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts
index 15adc27590..adbd8797b9 100644
--- a/packages/rrweb-snapshot/src/utils.ts
+++ b/packages/rrweb-snapshot/src/utils.ts
@@ -37,6 +37,7 @@ export function maskInputValue({
   if (
     maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
     maskInputOptions[type as keyof MaskInputOptions] ||
+    (tagName === 'input' && !type && maskInputOptions['text']) || // For inputs without a "type" attribute defined
     (maskInputSelector && input.matches(maskInputSelector))
   ) {
     if (maskInputFn) {
diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
index dbcc8c4cae..ad97b9a9f9 100644
--- a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
@@ -232,7 +232,10 @@ exports[`integration tests [html file]: form-fields.html 1`] = `
         <input type="checkbox" checked="" />
       </label>
       <label for="textarea">
-        <textarea name="" id="" cols="30" rows="10">1234</textarea>
+        <textarea name="" id="textarea1" cols="30" rows="10">1234</textarea>
+      </label>
+      <label for="textarea">
+        <textarea name="" id="textarea2" cols="30" rows="10">5678</textarea>
       </label>
       <label for="select">
         <select name="" id="" value="2">
diff --git a/packages/rrweb-snapshot/test/html/form-fields.html b/packages/rrweb-snapshot/test/html/form-fields.html
index 31a35afa10..7b5add5a96 100644
--- a/packages/rrweb-snapshot/test/html/form-fields.html
+++ b/packages/rrweb-snapshot/test/html/form-fields.html
@@ -19,7 +19,10 @@
         <input type="checkbox" />
       </label>
       <label for="textarea">
-        <textarea name="" id="" cols="30" rows="10"></textarea>
+        <textarea name="" id="textarea1" cols="30" rows="10"></textarea>
+      </label>
+      <label for="textarea">
+        <textarea name="" id="textarea2" cols="30" rows="10"></textarea>
       </label>
       <label for="select">
         <select name="" id="">
@@ -36,7 +39,8 @@
     document.querySelector('input[type="text"]').value = '1';
     document.querySelector('input[type="radio"]').checked = true;
     document.querySelector('input[type="checkbox"]').checked = true;
-    document.querySelector('textarea').value = '1234';
+    document.querySelector('#textarea1').value = '1234';
+    document.querySelector('#textarea2').textContent = '5678';
     document.querySelector('select').value = '2';
   </script>
 </html>
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index 031226dddf..e2da998fbd 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -3881,7 +3881,7 @@ exports[`record integration tests should mask all text (except unmaskTextSelecto
                         "childNodes": [
                           {
                             "type": 3,
-                            "textContent": "mask10",
+                            "textContent": "",
                             "id": 50
                           }
                         ],
@@ -4266,7 +4266,7 @@ exports[`record integration tests should mask only inputs 1`] = `
                         "childNodes": [
                           {
                             "type": 3,
-                            "textContent": "******",
+                            "textContent": "",
                             "id": 50
                           }
                         ],
@@ -4651,7 +4651,7 @@ exports[`record integration tests should mask texts 1`] = `
                         "childNodes": [
                           {
                             "type": 3,
-                            "textContent": "mask10",
+                            "textContent": "",
                             "id": 50
                           }
                         ],
@@ -5036,7 +5036,7 @@ exports[`record integration tests should mask texts using maskTextFn 1`] = `
                         "childNodes": [
                           {
                             "type": 3,
-                            "textContent": "mask10",
+                            "textContent": "",
                             "id": 50
                           }
                         ],
@@ -7382,6 +7382,238 @@ exports[`record integration tests should not record input events on ignored elem
 ]"
 `;
 
+exports[`record integration tests should not record input values if dynamically added and maskAllInputs is true 1`] = `
+"[
+  {
+    "type": 0,
+    "data": {}
+  },
+  {
+    "type": 1,
+    "data": {}
+  },
+  {
+    "type": 4,
+    "data": {
+      "href": "about:blank",
+      "width": 1920,
+      "height": 1080
+    }
+  },
+  {
+    "type": 2,
+    "data": {
+      "node": {
+        "type": 0,
+        "childNodes": [
+          {
+            "type": 1,
+            "name": "html",
+            "publicId": "",
+            "systemId": "",
+            "id": 2
+          },
+          {
+            "type": 2,
+            "tagName": "html",
+            "attributes": {
+              "lang": "en"
+            },
+            "childNodes": [
+              {
+                "type": 2,
+                "tagName": "head",
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 5
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "meta",
+                    "attributes": {
+                      "charset": "UTF-8"
+                    },
+                    "childNodes": [],
+                    "id": 6
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 7
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "meta",
+                    "attributes": {
+                      "name": "viewport",
+                      "content": "width=device-width, initial-scale=1.0"
+                    },
+                    "childNodes": [],
+                    "id": 8
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 9
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "title",
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "type": 3,
+                        "textContent": "Empty",
+                        "id": 11
+                      }
+                    ],
+                    "id": 10
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n  ",
+                    "id": 12
+                  }
+                ],
+                "id": 4
+              },
+              {
+                "type": 3,
+                "textContent": "\\n  ",
+                "id": 13
+              },
+              {
+                "type": 2,
+                "tagName": "body",
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 15
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "div",
+                    "attributes": {
+                      "id": "one"
+                    },
+                    "childNodes": [],
+                    "id": 16
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n  \\n    ",
+                    "id": 17
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "script",
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "type": 3,
+                        "textContent": "SCRIPT_PLACEHOLDER",
+                        "id": 19
+                      }
+                    ],
+                    "id": 18
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    \\n    \\n\\n",
+                    "id": 20
+                  }
+                ],
+                "id": 14
+              }
+            ],
+            "id": 3
+          }
+        ],
+        "id": 1
+      },
+      "initialOffset": {
+        "left": 0,
+        "top": 0
+      }
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 14,
+          "nextId": 16,
+          "node": {
+            "type": 2,
+            "tagName": "input",
+            "attributes": {
+              "id": "input",
+              "value": "**********************"
+            },
+            "childNodes": [],
+            "id": 21
+          }
+        }
+      ]
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "**********************",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 2,
+      "type": 5,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "***********************",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "************************",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "*************************",
+      "isChecked": false,
+      "id": 21
+    }
+  }
+]"
+`;
+
 exports[`record integration tests should not record input values if maskAllInputs is enabled 1`] = `
 "[
   {
@@ -8235,7 +8467,7 @@ exports[`record integration tests should not record input values if maskAllInput
 ]"
 `;
 
-exports[`record integration tests should only record unblocked elements 1`] = `
+exports[`record integration tests should not record textarea values if dynamically added and maskAllInputs is true 1`] = `
 "[
   {
     "type": 0,
@@ -8312,21 +8544,6 @@ exports[`record integration tests should only record unblocked elements 1`] = `
                     "textContent": "\\n    ",
                     "id": 9
                   },
-                  {
-                    "type": 2,
-                    "tagName": "meta",
-                    "attributes": {
-                      "http-equiv": "X-UA-Compatible",
-                      "content": "ie=edge"
-                    },
-                    "childNodes": [],
-                    "id": 10
-                  },
-                  {
-                    "type": 3,
-                    "textContent": "\\n    ",
-                    "id": 11
-                  },
                   {
                     "type": 2,
                     "tagName": "title",
@@ -8334,16 +8551,16 @@ exports[`record integration tests should only record unblocked elements 1`] = `
                     "childNodes": [
                       {
                         "type": 3,
-                        "textContent": "Block record",
-                        "id": 13
+                        "textContent": "Empty",
+                        "id": 11
                       }
                     ],
-                    "id": 12
+                    "id": 10
                   },
                   {
                     "type": 3,
                     "textContent": "\\n  ",
-                    "id": 14
+                    "id": 12
                   }
                 ],
                 "id": 4
@@ -8351,7 +8568,7 @@ exports[`record integration tests should only record unblocked elements 1`] = `
               {
                 "type": 3,
                 "textContent": "\\n  ",
-                "id": 15
+                "id": 13
               },
               {
                 "type": 2,
@@ -8361,23 +8578,281 @@ exports[`record integration tests should only record unblocked elements 1`] = `
                   {
                     "type": 3,
                     "textContent": "\\n    ",
-                    "id": 17
+                    "id": 15
                   },
                   {
                     "type": 2,
                     "tagName": "div",
                     "attributes": {
-                      "class": "rr-block",
-                      "rr_width": "50px",
-                      "rr_height": "50px"
+                      "id": "one"
                     },
                     "childNodes": [],
-                    "id": 18
+                    "id": 16
                   },
                   {
                     "type": 3,
-                    "textContent": "\\n\\n    ",
-                    "id": 19
+                    "textContent": "\\n  \\n    ",
+                    "id": 17
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "script",
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "type": 3,
+                        "textContent": "SCRIPT_PLACEHOLDER",
+                        "id": 19
+                      }
+                    ],
+                    "id": 18
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    \\n    \\n\\n",
+                    "id": 20
+                  }
+                ],
+                "id": 14
+              }
+            ],
+            "id": 3
+          }
+        ],
+        "id": 1
+      },
+      "initialOffset": {
+        "left": 0,
+        "top": 0
+      }
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 14,
+          "nextId": 16,
+          "node": {
+            "type": 2,
+            "tagName": "textarea",
+            "attributes": {
+              "id": "textarea",
+              "value": "*************************"
+            },
+            "childNodes": [],
+            "id": 21
+          }
+        },
+        {
+          "parentId": 21,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "br",
+            "attributes": {},
+            "childNodes": [],
+            "id": 22
+          }
+        },
+        {
+          "parentId": 21,
+          "nextId": 22,
+          "node": {
+            "type": 3,
+            "textContent": "",
+            "id": 23
+          }
+        }
+      ]
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 2,
+      "type": 5,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "**************************",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "***************************",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "****************************",
+      "isChecked": false,
+      "id": 21
+    }
+  }
+]"
+`;
+
+exports[`record integration tests should only record unblocked elements 1`] = `
+"[
+  {
+    "type": 0,
+    "data": {}
+  },
+  {
+    "type": 1,
+    "data": {}
+  },
+  {
+    "type": 4,
+    "data": {
+      "href": "about:blank",
+      "width": 1920,
+      "height": 1080
+    }
+  },
+  {
+    "type": 2,
+    "data": {
+      "node": {
+        "type": 0,
+        "childNodes": [
+          {
+            "type": 1,
+            "name": "html",
+            "publicId": "",
+            "systemId": "",
+            "id": 2
+          },
+          {
+            "type": 2,
+            "tagName": "html",
+            "attributes": {
+              "lang": "en"
+            },
+            "childNodes": [
+              {
+                "type": 2,
+                "tagName": "head",
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 5
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "meta",
+                    "attributes": {
+                      "charset": "UTF-8"
+                    },
+                    "childNodes": [],
+                    "id": 6
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 7
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "meta",
+                    "attributes": {
+                      "name": "viewport",
+                      "content": "width=device-width, initial-scale=1.0"
+                    },
+                    "childNodes": [],
+                    "id": 8
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 9
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "meta",
+                    "attributes": {
+                      "http-equiv": "X-UA-Compatible",
+                      "content": "ie=edge"
+                    },
+                    "childNodes": [],
+                    "id": 10
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 11
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "title",
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "type": 3,
+                        "textContent": "Block record",
+                        "id": 13
+                      }
+                    ],
+                    "id": 12
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n  ",
+                    "id": 14
+                  }
+                ],
+                "id": 4
+              },
+              {
+                "type": 3,
+                "textContent": "\\n  ",
+                "id": 15
+              },
+              {
+                "type": 2,
+                "tagName": "body",
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 17
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "div",
+                    "attributes": {
+                      "class": "rr-block",
+                      "rr_width": "50px",
+                      "rr_height": "50px"
+                    },
+                    "childNodes": [],
+                    "id": 18
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n\\n    ",
+                    "id": 19
                   },
                   {
                     "type": 2,
@@ -11070,7 +11545,7 @@ exports[`record integration tests should record input userTriggered values if us
 ]"
 `;
 
-exports[`record integration tests should record nested iframes and shadow doms 1`] = `
+exports[`record integration tests should record input values if dynamically added and maskAllInputs is false 1`] = `
 "[
   {
     "type": 0,
@@ -11154,7 +11629,7 @@ exports[`record integration tests should record nested iframes and shadow doms 1
                     "childNodes": [
                       {
                         "type": 3,
-                        "textContent": "Frame 2",
+                        "textContent": "Empty",
                         "id": 11
                       }
                     ],
@@ -11180,16 +11655,714 @@ exports[`record integration tests should record nested iframes and shadow doms 1
                 "childNodes": [
                   {
                     "type": 3,
-                    "textContent": "\\n    frame 2\\n  \\n    ",
+                    "textContent": "\\n    ",
                     "id": 15
                   },
                   {
                     "type": 2,
-                    "tagName": "script",
-                    "attributes": {},
-                    "childNodes": [
-                      {
-                        "type": 3,
+                    "tagName": "div",
+                    "attributes": {
+                      "id": "one"
+                    },
+                    "childNodes": [],
+                    "id": 16
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n  \\n    ",
+                    "id": 17
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "script",
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "type": 3,
+                        "textContent": "SCRIPT_PLACEHOLDER",
+                        "id": 19
+                      }
+                    ],
+                    "id": 18
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    \\n    \\n\\n",
+                    "id": 20
+                  }
+                ],
+                "id": 14
+              }
+            ],
+            "id": 3
+          }
+        ],
+        "id": 1
+      },
+      "initialOffset": {
+        "left": 0,
+        "top": 0
+      }
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 14,
+          "nextId": 16,
+          "node": {
+            "type": 2,
+            "tagName": "input",
+            "attributes": {
+              "id": "input",
+              "value": "input should not be masked"
+            },
+            "childNodes": [],
+            "id": 21
+          }
+        }
+      ]
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "input should not be masked",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 2,
+      "type": 5,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "input should not be maskedm",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "input should not be maskedmo",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "input should not be maskedmoo",
+      "isChecked": false,
+      "id": 21
+    }
+  }
+]"
+`;
+
+exports[`record integration tests should record input values if dynamically added, maskAllInputs is false, and mask selector is used 1`] = `
+"[
+  {
+    "type": 0,
+    "data": {}
+  },
+  {
+    "type": 1,
+    "data": {}
+  },
+  {
+    "type": 4,
+    "data": {
+      "href": "about:blank",
+      "width": 1920,
+      "height": 1080
+    }
+  },
+  {
+    "type": 2,
+    "data": {
+      "node": {
+        "type": 0,
+        "childNodes": [
+          {
+            "type": 1,
+            "name": "html",
+            "publicId": "",
+            "systemId": "",
+            "id": 2
+          },
+          {
+            "type": 2,
+            "tagName": "html",
+            "attributes": {
+              "lang": "en"
+            },
+            "childNodes": [
+              {
+                "type": 2,
+                "tagName": "head",
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 5
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "meta",
+                    "attributes": {
+                      "charset": "UTF-8"
+                    },
+                    "childNodes": [],
+                    "id": 6
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 7
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "meta",
+                    "attributes": {
+                      "name": "viewport",
+                      "content": "width=device-width, initial-scale=1.0"
+                    },
+                    "childNodes": [],
+                    "id": 8
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 9
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "title",
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "type": 3,
+                        "textContent": "Empty",
+                        "id": 11
+                      }
+                    ],
+                    "id": 10
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n  ",
+                    "id": 12
+                  }
+                ],
+                "id": 4
+              },
+              {
+                "type": 3,
+                "textContent": "\\n  ",
+                "id": 13
+              },
+              {
+                "type": 2,
+                "tagName": "body",
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 15
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "div",
+                    "attributes": {
+                      "id": "one"
+                    },
+                    "childNodes": [],
+                    "id": 16
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n  \\n    ",
+                    "id": 17
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "script",
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "type": 3,
+                        "textContent": "SCRIPT_PLACEHOLDER",
+                        "id": 19
+                      }
+                    ],
+                    "id": 18
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    \\n    \\n\\n",
+                    "id": 20
+                  }
+                ],
+                "id": 14
+              }
+            ],
+            "id": 3
+          }
+        ],
+        "id": 1
+      },
+      "initialOffset": {
+        "left": 0,
+        "top": 0
+      }
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 14,
+          "nextId": 16,
+          "node": {
+            "type": 2,
+            "tagName": "input",
+            "attributes": {
+              "id": "input-masked",
+              "class": "rr-mask",
+              "value": "input should be masked"
+            },
+            "childNodes": [],
+            "id": 21
+          }
+        }
+      ]
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "input should be masked",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 2,
+      "type": 5,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "input should be maskedm",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "input should be maskedmo",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "input should be maskedmoo",
+      "isChecked": false,
+      "id": 21
+    }
+  }
+]"
+`;
+
+exports[`record integration tests should record input values if dynamically added, maskAllInputs is true, and unmask selector is used 1`] = `
+"[
+  {
+    "type": 0,
+    "data": {}
+  },
+  {
+    "type": 1,
+    "data": {}
+  },
+  {
+    "type": 4,
+    "data": {
+      "href": "about:blank",
+      "width": 1920,
+      "height": 1080
+    }
+  },
+  {
+    "type": 2,
+    "data": {
+      "node": {
+        "type": 0,
+        "childNodes": [
+          {
+            "type": 1,
+            "name": "html",
+            "publicId": "",
+            "systemId": "",
+            "id": 2
+          },
+          {
+            "type": 2,
+            "tagName": "html",
+            "attributes": {
+              "lang": "en"
+            },
+            "childNodes": [
+              {
+                "type": 2,
+                "tagName": "head",
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 5
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "meta",
+                    "attributes": {
+                      "charset": "UTF-8"
+                    },
+                    "childNodes": [],
+                    "id": 6
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 7
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "meta",
+                    "attributes": {
+                      "name": "viewport",
+                      "content": "width=device-width, initial-scale=1.0"
+                    },
+                    "childNodes": [],
+                    "id": 8
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 9
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "title",
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "type": 3,
+                        "textContent": "Empty",
+                        "id": 11
+                      }
+                    ],
+                    "id": 10
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n  ",
+                    "id": 12
+                  }
+                ],
+                "id": 4
+              },
+              {
+                "type": 3,
+                "textContent": "\\n  ",
+                "id": 13
+              },
+              {
+                "type": 2,
+                "tagName": "body",
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 15
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "div",
+                    "attributes": {
+                      "id": "one"
+                    },
+                    "childNodes": [],
+                    "id": 16
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n  \\n    ",
+                    "id": 17
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "script",
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "type": 3,
+                        "textContent": "SCRIPT_PLACEHOLDER",
+                        "id": 19
+                      }
+                    ],
+                    "id": 18
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    \\n    \\n\\n",
+                    "id": 20
+                  }
+                ],
+                "id": 14
+              }
+            ],
+            "id": 3
+          }
+        ],
+        "id": 1
+      },
+      "initialOffset": {
+        "left": 0,
+        "top": 0
+      }
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 14,
+          "nextId": 16,
+          "node": {
+            "type": 2,
+            "tagName": "input",
+            "attributes": {
+              "id": "input-unmasked",
+              "class": "rr-unmask",
+              "value": "input should be unmasked"
+            },
+            "childNodes": [],
+            "id": 21
+          }
+        }
+      ]
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "input should be unmasked",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 2,
+      "type": 5,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "input should be unmaskedm",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "input should be unmaskedmo",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "input should be unmaskedmoo",
+      "isChecked": false,
+      "id": 21
+    }
+  }
+]"
+`;
+
+exports[`record integration tests should record nested iframes and shadow doms 1`] = `
+"[
+  {
+    "type": 0,
+    "data": {}
+  },
+  {
+    "type": 1,
+    "data": {}
+  },
+  {
+    "type": 4,
+    "data": {
+      "href": "about:blank",
+      "width": 1920,
+      "height": 1080
+    }
+  },
+  {
+    "type": 2,
+    "data": {
+      "node": {
+        "type": 0,
+        "childNodes": [
+          {
+            "type": 1,
+            "name": "html",
+            "publicId": "",
+            "systemId": "",
+            "id": 2
+          },
+          {
+            "type": 2,
+            "tagName": "html",
+            "attributes": {
+              "lang": "en"
+            },
+            "childNodes": [
+              {
+                "type": 2,
+                "tagName": "head",
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 5
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "meta",
+                    "attributes": {
+                      "charset": "UTF-8"
+                    },
+                    "childNodes": [],
+                    "id": 6
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 7
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "meta",
+                    "attributes": {
+                      "name": "viewport",
+                      "content": "width=device-width, initial-scale=1.0"
+                    },
+                    "childNodes": [],
+                    "id": 8
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 9
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "title",
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "type": 3,
+                        "textContent": "Frame 2",
+                        "id": 11
+                      }
+                    ],
+                    "id": 10
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n  ",
+                    "id": 12
+                  }
+                ],
+                "id": 4
+              },
+              {
+                "type": 3,
+                "textContent": "\\n  ",
+                "id": 13
+              },
+              {
+                "type": 2,
+                "tagName": "body",
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "type": 3,
+                    "textContent": "\\n    frame 2\\n  \\n    ",
+                    "id": 15
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "script",
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "type": 3,
                         "textContent": "SCRIPT_PLACEHOLDER",
                         "id": 17
                       }
@@ -11855,6 +13028,249 @@ exports[`record integration tests should record shadow DOM 1`] = `
 ]"
 `;
 
+exports[`record integration tests should record textarea values if dynamically added and maskAllInputs is false 1`] = `
+"[
+  {
+    "type": 0,
+    "data": {}
+  },
+  {
+    "type": 1,
+    "data": {}
+  },
+  {
+    "type": 4,
+    "data": {
+      "href": "about:blank",
+      "width": 1920,
+      "height": 1080
+    }
+  },
+  {
+    "type": 2,
+    "data": {
+      "node": {
+        "type": 0,
+        "childNodes": [
+          {
+            "type": 1,
+            "name": "html",
+            "publicId": "",
+            "systemId": "",
+            "id": 2
+          },
+          {
+            "type": 2,
+            "tagName": "html",
+            "attributes": {
+              "lang": "en"
+            },
+            "childNodes": [
+              {
+                "type": 2,
+                "tagName": "head",
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 5
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "meta",
+                    "attributes": {
+                      "charset": "UTF-8"
+                    },
+                    "childNodes": [],
+                    "id": 6
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 7
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "meta",
+                    "attributes": {
+                      "name": "viewport",
+                      "content": "width=device-width, initial-scale=1.0"
+                    },
+                    "childNodes": [],
+                    "id": 8
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 9
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "title",
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "type": 3,
+                        "textContent": "Empty",
+                        "id": 11
+                      }
+                    ],
+                    "id": 10
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n  ",
+                    "id": 12
+                  }
+                ],
+                "id": 4
+              },
+              {
+                "type": 3,
+                "textContent": "\\n  ",
+                "id": 13
+              },
+              {
+                "type": 2,
+                "tagName": "body",
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "type": 3,
+                    "textContent": "\\n    ",
+                    "id": 15
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "div",
+                    "attributes": {
+                      "id": "one"
+                    },
+                    "childNodes": [],
+                    "id": 16
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n  \\n    ",
+                    "id": 17
+                  },
+                  {
+                    "type": 2,
+                    "tagName": "script",
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "type": 3,
+                        "textContent": "SCRIPT_PLACEHOLDER",
+                        "id": 19
+                      }
+                    ],
+                    "id": 18
+                  },
+                  {
+                    "type": 3,
+                    "textContent": "\\n    \\n    \\n\\n",
+                    "id": 20
+                  }
+                ],
+                "id": 14
+              }
+            ],
+            "id": 3
+          }
+        ],
+        "id": 1
+      },
+      "initialOffset": {
+        "left": 0,
+        "top": 0
+      }
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 14,
+          "nextId": 16,
+          "node": {
+            "type": 2,
+            "tagName": "textarea",
+            "attributes": {
+              "id": "textarea",
+              "value": "textarea should not be masked"
+            },
+            "childNodes": [],
+            "id": 21
+          }
+        },
+        {
+          "parentId": 21,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "br",
+            "attributes": {},
+            "childNodes": [],
+            "id": 22
+          }
+        },
+        {
+          "parentId": 21,
+          "nextId": 22,
+          "node": {
+            "type": 3,
+            "textContent": "",
+            "id": 23
+          }
+        }
+      ]
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 2,
+      "type": 5,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "mtextarea should not be masked",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "motextarea should not be masked",
+      "isChecked": false,
+      "id": 21
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 5,
+      "text": "mootextarea should not be masked",
+      "isChecked": false,
+      "id": 21
+    }
+  }
+]"
+`;
+
 exports[`record integration tests should record webgl canvas mutations 1`] = `
 "[
   {
diff --git a/packages/rrweb/test/html/empty.html b/packages/rrweb/test/html/empty.html
new file mode 100644
index 0000000000..6ceadbba12
--- /dev/null
+++ b/packages/rrweb/test/html/empty.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Empty</title>
+  </head>
+  <body>
+    <div id="one"></div>
+  </body>
+</html>
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index fa6a00f5e5..cd3530261d 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -10,7 +10,7 @@ import {
   waitForRAF,
   replaceLast,
 } from './utils';
-import { recordOptions, eventWithTime, EventType } from '../src/types';
+import { recordOptions, eventWithTime, EventType, IncrementalSource } from '../src/types';
 import { visitSnapshot, NodeType } from '@sentry-internal/rrweb-snapshot';
 
 interface ISuite {
@@ -24,6 +24,13 @@ interface IMimeType {
   [key: string]: string;
 }
 
+/**
+ * Used to filter scroll events out of snapshots as they are flakey
+ */
+function isNotScroll(snapshot: eventWithTime) {
+  return !(snapshot.type === EventType.IncrementalSnapshot && snapshot.data.source === IncrementalSource.Scroll)
+}
+
 describe('record integration tests', function (this: ISuite) {
   jest.setTimeout(10_000);
 
@@ -53,6 +60,7 @@ describe('record integration tests', function (this: ISuite) {
         maskAllText: ${options.maskAllText},
         maskTextFn: ${options.maskTextFn},
         unmaskTextSelector: ${JSON.stringify(options.unmaskTextSelector)},
+        unmaskInputSelector: ${JSON.stringify(options.unmaskInputSelector)},
         blockSelector: ${JSON.stringify(options.blockSelector)},
         unblockSelector: ${JSON.stringify(options.unblockSelector)},
         recordCanvas: ${options.recordCanvas},
@@ -239,6 +247,142 @@ describe('record integration tests', function (this: ISuite) {
     assertSnapshot(snapshots);
   });
 
+  it('should record input values if dynamically added and maskAllInputs is false', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(
+      getHtml.call(this, 'empty.html', { maskAllInputs: false }),
+    );
+
+    await page.evaluate(() => {
+      const el = document.createElement('input');
+      el.id = 'input';
+      el.value = 'input should not be masked';
+
+      const nextElement = document.querySelector('#one')!;
+      nextElement.parentNode!.insertBefore(el, nextElement);
+    });
+
+    await page.type('#input', 'moo');
+
+    const snapshots = await page.evaluate('window.snapshots') as eventWithTime[];
+    assertSnapshot(snapshots.filter(isNotScroll));
+  });
+
+  it('should record textarea values if dynamically added and maskAllInputs is false', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(
+      getHtml.call(this, 'empty.html', { maskAllInputs: false }),
+    );
+
+    await page.evaluate(() => {
+      const el = document.createElement('textarea');
+      el.id = 'textarea';
+      el.innerText = `textarea should not be masked
+`;
+
+      const nextElement = document.querySelector('#one')!;
+      nextElement.parentNode!.insertBefore(el, nextElement);
+    });
+
+    await page.type('#textarea', 'moo');
+
+    const snapshots = await page.evaluate('window.snapshots') as eventWithTime[];
+    assertSnapshot(snapshots.filter(isNotScroll));
+  });
+
+  it('should record input values if dynamically added, maskAllInputs is false, and mask selector is used', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(
+      getHtml.call(this, 'empty.html', { maskAllInputs: false, maskInputSelector: '.rr-mask' }),
+    );
+
+    await page.evaluate(() => {
+      const el = document.createElement('input');
+      el.id = 'input-masked';
+      el.className = 'rr-mask';
+      el.value = 'input should be masked';
+
+      const nextElement = document.querySelector('#one')!;
+      nextElement.parentNode!.insertBefore(el, nextElement);
+    });
+
+    await page.type('#input-masked', 'moo');
+
+    const snapshots = await page.evaluate('window.snapshots') as eventWithTime[];
+    assertSnapshot(snapshots.filter(isNotScroll));
+  });
+
+  it('should not record input values if dynamically added and maskAllInputs is true', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(
+      getHtml.call(this, 'empty.html', { maskAllInputs: true }),
+    );
+
+    await page.evaluate(() => {
+      const el = document.createElement('input');
+      el.id = 'input';
+      el.value = 'input should be masked';
+
+      const nextElement = document.querySelector('#one')!;
+      nextElement.parentNode!.insertBefore(el, nextElement);
+    });
+
+    await page.type('#input', 'moo');
+
+    const snapshots = await page.evaluate('window.snapshots') as eventWithTime[];
+    assertSnapshot(snapshots.filter(isNotScroll));
+  });
+
+  it('should not record textarea values if dynamically added and maskAllInputs is true', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(
+      getHtml.call(this, 'empty.html', { maskAllInputs: true }),
+    );
+
+    await page.evaluate(() => {
+      const el = document.createElement('textarea');
+      el.id = 'textarea';
+      el.innerText = `textarea should be masked
+`;
+
+      const nextElement = document.querySelector('#one')!;
+      nextElement.parentNode!.insertBefore(el, nextElement);
+    });
+
+    await page.type('#textarea', 'moo');
+
+    const snapshots = await page.evaluate('window.snapshots') as eventWithTime[];
+    assertSnapshot(snapshots.filter(isNotScroll));
+  });
+
+  it('should record input values if dynamically added, maskAllInputs is true, and unmask selector is used', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(
+      getHtml.call(this, 'empty.html', { maskAllInputs: true, unmaskInputSelector: '.rr-unmask'}),
+    );
+
+    await page.evaluate(() => {
+      const el = document.createElement('input');
+      el.id = 'input-unmasked';
+      el.className = 'rr-unmask';
+      el.value = 'input should be unmasked';
+
+      const nextElement = document.querySelector('#one')!;
+      nextElement.parentNode!.insertBefore(el, nextElement);
+    });
+
+    await page.type('#input-unmasked', 'moo');
+
+    const snapshots = await page.evaluate('window.snapshots') as eventWithTime[];
+    assertSnapshot(snapshots.filter(isNotScroll));
+  });
+
   it('can use maskInputOptions to configure which type of inputs should be masked', async () => {
     const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');