fix: textarea value is being duplicated (#62)

Fix bug introduced in #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.
getsentry · Feb 24, 2023 · 00c5d28 · 00c5d28
1 parent 557c3af
commit 00c5d28
Show file tree

Hide file tree

Showing 7 changed files with 1,626 additions and 58 deletions.
diff --git 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';
-}
+}
diff --git 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
@@ -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
@@ -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>