From 476af5b79bac543dde7ec3c868aa0ffb77c2e313 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Thu, 9 Nov 2023 11:58:19 +0000
Subject: [PATCH 01/12] Fix serialization and mutation of <textarea> elements
 taking account the duality that the value can be set in either the child
 node, or in the value _parameter_ (not attribute)

---
 packages/rrweb-snapshot/src/snapshot.ts       |  25 +-
 .../__snapshots__/integration.test.ts.snap    |   1 +
 .../rrweb-snapshot/test/html/form-fields.html |   4 +-
 packages/rrweb-snapshot/test/snapshot.test.ts |  40 ++-
 packages/rrweb/src/replay/index.ts            |   2 +
 .../__snapshots__/integration.test.ts.snap    | 282 +++++++++++++++++-
 packages/rrweb/test/html/form.html            |   1 +
 packages/rrweb/test/integration.test.ts       |  48 +++
 .../cross-origin-iframes.test.ts.snap         |  50 +++-
 9 files changed, 438 insertions(+), 15 deletions(-)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 6d2f2ed2e8..953a493e61 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -666,6 +666,14 @@ function serializeElementNode(
     const value = (n as HTMLInputElement | HTMLTextAreaElement).value;
     const checked = (n as HTMLInputElement).checked;
     if (
+      tagName === 'textarea' &&
+      value &&
+      n.childNodes.length === 1 &&
+      n.childNodes[0].nodeType === n.TEXT_NODE &&
+      (n.childNodes[0] as Text).data === value
+    ) {
+      // value will be recorded via the childNode instead
+    } else if (
       attributes.type !== 'radio' &&
       attributes.type !== 'checkbox' &&
       attributes.type !== 'submit' &&
@@ -1090,10 +1098,19 @@ export function serializeNodeWithId(
       stylesheetLoadTimeout,
       keepIframeSrcFn,
     };
-    for (const childN of Array.from(n.childNodes)) {
-      const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
-      if (serializedChildNode) {
-        serializedNode.childNodes.push(serializedChildNode);
+
+    if (
+      serializedNode.type === NodeType.Element &&
+      serializedNode.tagName === 'textarea' &&
+      serializedNode.attributes.value !== undefined
+    ) {
+      // value parameter in DOM reflects the correct value, so ignore childNode
+    } else {
+      for (const childN of Array.from(n.childNodes)) {
+        const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
+        if (serializedChildNode) {
+          serializedNode.childNodes.push(serializedChildNode);
+        }
       }
     }
 
diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
index 77beb3be81..f537fc7b29 100644
--- a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
@@ -247,6 +247,7 @@ exports[`integration tests [html file]: form-fields.html 1`] = `
       </label>
       <label for=\\"textarea\\">
         <textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\">1234</textarea>
+        <textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\">1234</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..a1cffb0dc7 100644
--- a/packages/rrweb-snapshot/test/html/form-fields.html
+++ b/packages/rrweb-snapshot/test/html/form-fields.html
@@ -20,6 +20,7 @@
       </label>
       <label for="textarea">
         <textarea name="" id="" cols="30" rows="10"></textarea>
+        <textarea name="" id="" cols="30" rows="10">-1</textarea>
       </label>
       <label for="select">
         <select name="" id="">
@@ -36,7 +37,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('textarea:empty').value = '1234';
+    document.querySelector('textarea:not(:empty)').value = '1234';
     document.querySelector('select').value = '2';
   </script>
 </html>
diff --git a/packages/rrweb-snapshot/test/snapshot.test.ts b/packages/rrweb-snapshot/test/snapshot.test.ts
index 75d635e0c0..dc41b33461 100644
--- a/packages/rrweb-snapshot/test/snapshot.test.ts
+++ b/packages/rrweb-snapshot/test/snapshot.test.ts
@@ -7,7 +7,7 @@ import {
   serializeNodeWithId,
   _isBlockedElement,
 } from '../src/snapshot';
-import { serializedNodeWithId } from '../src/types';
+import { serializedNodeWithId, elementNode } from '../src/types';
 import { Mirror } from '../src/utils';
 
 describe('absolute url to stylesheet', () => {
@@ -218,3 +218,41 @@ describe('scrollTop/scrollLeft', () => {
     });
   });
 });
+
+describe('form', () => {
+  const serializeNode = (node: Node): serializedNodeWithId | null => {
+    return serializeNodeWithId(node, {
+      doc: document,
+      mirror: new Mirror(),
+      blockClass: 'blockblock',
+      blockSelector: null,
+      maskTextClass: 'maskmask',
+      maskTextSelector: null,
+      skipChild: false,
+      inlineStylesheet: true,
+      maskTextFn: undefined,
+      maskInputFn: undefined,
+      slimDOMOptions: {},
+      newlyAddedElement: false,
+    });
+  };
+
+  const render = (html: string): HTMLTextAreaElement => {
+    document.write(html);
+    return document.querySelector('textarea')!;
+  };
+
+  it('should record textarea values once', () => {
+    const el = render(`<textarea>Lorem ipsum</textarea>`);
+    const sel = serializeNode(el) as elementNode;
+    expect(sel?.attributes).toEqual({}); // shouldn't be stored in .value
+    expect(sel).toMatchObject({
+      childNodes: [
+        {
+          type: 3,
+          textContent: 'Lorem ipsum',
+        },
+      ],
+    });
+  });
+});
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index aac84c2783..ea6ea6ac77 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -1564,6 +1564,8 @@ export class Replayer {
         const childNodeArray = Array.isArray(parent.childNodes)
           ? parent.childNodes
           : Array.from(parent.childNodes);
+        // This should be redundant now as we are either recording the value or the childNode, and not both
+        // keeping around for backwards compatibility with old bad double data, see
 
         // https://github.com/rrweb-io/rrweb/issues/745
         // parent is textarea, will only keep one child node as the value
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index e3fb552c7e..82166a5203 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -2268,8 +2268,26 @@ exports[`record integration tests can record form interactions 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 61
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"textarea\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"pre value\\",
+                            \\"id\\": 63
+                          }
+                        ],
+                        \\"id\\": 62
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 64
                       }
                     ],
                     \\"id\\": 18
@@ -2277,7 +2295,7 @@ exports[`record integration tests can record form interactions 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 62
+                    \\"id\\": 65
                   },
                   {
                     \\"type\\": 2,
@@ -2287,15 +2305,15 @@ exports[`record integration tests can record form interactions 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 64
+                        \\"id\\": 67
                       }
                     ],
-                    \\"id\\": 63
+                    \\"id\\": 66
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 65
+                    \\"id\\": 68
                   }
                 ],
                 \\"id\\": 16
@@ -3811,6 +3829,260 @@ exports[`record integration tests can record style changes compactly and preserv
 ]"
 `;
 
+exports[`record integration tests can record textarea mutations correctly 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\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"textarea\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 21
+          }
+        },
+        {
+          \\"parentId\\": 21,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"pre value\\",
+            \\"id\\": 22
+          }
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [
+        {
+          \\"id\\": 22,
+          \\"value\\": \\"pre value ok\\"
+        }
+      ],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 21
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"1pre value ok\\",
+      \\"isChecked\\": false,
+      \\"id\\": 21
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [
+        {
+          \\"id\\": 22,
+          \\"value\\": \\"ignore\\"
+        },
+        {
+          \\"id\\": 22,
+          \\"value\\": \\"ignore\\"
+        }
+      ],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"12pre value ok\\",
+      \\"isChecked\\": false,
+      \\"id\\": 21
+    }
+  }
+]"
+`;
+
 exports[`record integration tests can use maskInputOptions to configure which type of inputs should be masked 1`] = `
 "[
   {
diff --git a/packages/rrweb/test/html/form.html b/packages/rrweb/test/html/form.html
index 9125e983fa..8480259fe0 100644
--- a/packages/rrweb/test/html/form.html
+++ b/packages/rrweb/test/html/form.html
@@ -33,6 +33,7 @@
       <label for="password">
         <input type="password" />
       </label>
+      <textarea>pre value</textarea>
     </form>
   </body>
 </html>
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index 0d4c871854..a94b9d9fcd 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -105,6 +105,54 @@ describe('record integration tests', function (this: ISuite) {
     assertSnapshot(snapshots);
   });
 
+  it('can record textarea mutations correctly', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(getHtml.call(this, 'empty.html'));
+    await page.evaluate(() => {
+      const ta = document.createElement('textarea');
+      ta.innerText = 'pre value'; // this mutation should be recorded
+      document.body.append(ta);
+    });
+
+    await page.evaluate(() => {
+      const t = document.querySelector('textarea') as HTMLTextAreaElement;
+      (t.childNodes[0] as Text).appendData(' ok'); // this mutation is also valid
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 101)); // we will check replay before this
+
+    await page.type('textarea', '1'); // types (inserts) at index 0, in front of existing text
+
+    await page.evaluate(() => {
+      const t = document.querySelector('textarea') as HTMLTextAreaElement;
+      // user has typed so childNode content should now be ignored
+      (t.childNodes[0] as Text).data = 'igno';
+      (t.childNodes[0] as Text).appendData('re');
+      // this mutation is currently emitted, and shows up in snapshot
+      // but we will check that it doesn't have any effect on the value
+      // there is nothing explicit in rrweb which enforces this, but this test may protect against
+      // a future change where a mutation on a textarea incorrectly updates the .value
+    });
+
+    await page.type('textarea', '2'); // cursor is at index 1
+
+    const snapshots = (await page.evaluate(
+      'window.snapshots',
+    )) as eventWithTime[];
+    assertSnapshot(snapshots);
+
+    const replayResult = await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(window.snapshots);
+      replayer.pause(100);
+      let val = replayer.iframe.contentDocument.querySelector('textarea').value + '|';
+      replayer.pause(250);
+      val + replayer.iframe.contentDocument.querySelector('textarea').value;
+    `);
+    expect(replayResult).toEqual('pre value ok|12pre value ok'); // test at 2 times
+  });
+
   it('can record childList mutations', async () => {
     const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
diff --git a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
index 07d4f53363..7dc39e4b10 100644
--- a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
+++ b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
@@ -1586,9 +1586,30 @@ exports[`cross origin iframes form.html should map input events correctly 1`] =
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"textContent\\": \\"\\\\n      \\",
                             \\"rootId\\": 11,
                             \\"id\\": 73
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"textarea\\",
+                            \\"attributes\\": {},
+                            \\"childNodes\\": [
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"pre value\\",
+                                \\"rootId\\": 11,
+                                \\"id\\": 75
+                              }
+                            ],
+                            \\"rootId\\": 11,
+                            \\"id\\": 74
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"rootId\\": 11,
+                            \\"id\\": 76
                           }
                         ],
                         \\"rootId\\": 11,
@@ -1598,7 +1619,7 @@ exports[`cross origin iframes form.html should map input events correctly 1`] =
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
                         \\"rootId\\": 11,
-                        \\"id\\": 74
+                        \\"id\\": 77
                       }
                     ],
                     \\"rootId\\": 11,
@@ -2583,9 +2604,30 @@ exports[`cross origin iframes form.html should map scroll events correctly 1`] =
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"textContent\\": \\"\\\\n      \\",
                             \\"rootId\\": 11,
                             \\"id\\": 73
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"textarea\\",
+                            \\"attributes\\": {},
+                            \\"childNodes\\": [
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"pre value\\",
+                                \\"rootId\\": 11,
+                                \\"id\\": 75
+                              }
+                            ],
+                            \\"rootId\\": 11,
+                            \\"id\\": 74
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"rootId\\": 11,
+                            \\"id\\": 76
                           }
                         ],
                         \\"rootId\\": 11,
@@ -2595,7 +2637,7 @@ exports[`cross origin iframes form.html should map scroll events correctly 1`] =
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
                         \\"rootId\\": 11,
-                        \\"id\\": 74
+                        \\"id\\": 77
                       }
                     ],
                     \\"rootId\\": 11,

From a8078886eec58d3766bb02bace93850c79aa8414 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Thu, 9 Nov 2023 13:46:29 +0000
Subject: [PATCH 02/12] Create rare-adults-sneeze.md

---
 .changeset/rare-adults-sneeze.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/rare-adults-sneeze.md

diff --git a/.changeset/rare-adults-sneeze.md b/.changeset/rare-adults-sneeze.md
new file mode 100644
index 0000000000..0299891328
--- /dev/null
+++ b/.changeset/rare-adults-sneeze.md
@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Don't double-record the values of <textarea>s when they already have some content prefilled #1301

From cbfc506954537e86d36bb3f1eb2a1a641410feeb Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Thu, 9 Nov 2023 15:32:09 +0000
Subject: [PATCH 03/12] Bug fix and regression test for #112

 - this is to fix up 'historical' recordings, as duplicate textarea content should no longer be being created at record time (see previous commit in this PR)
 - new test shows what the snapshot generated by previous versions of rrweb used to look like, hence 'bad'
 - original 0efe23f04acde fix either didn't work or no longer works due to childNodes being appended subsequent to this part of the code
---
 packages/rrweb-snapshot/src/rebuild.ts     |  9 +--
 packages/rrweb/test/events/bad-textarea.ts | 80 ++++++++++++++++++++++
 packages/rrweb/test/replayer.test.ts       | 16 +++++
 3 files changed, 98 insertions(+), 7 deletions(-)
 create mode 100644 packages/rrweb/test/events/bad-textarea.ts

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index c3b15babba..147004038f 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -200,14 +200,9 @@ function buildNode(
           value = addHoverClass(value, cache);
         }
         if ((isTextarea || isRemoteOrDynamicCss) && typeof value === 'string') {
-          const child = doc.createTextNode(value);
+          node.appendChild(doc.createTextNode(value));
           // https://github.com/rrweb-io/rrweb/issues/112
-          for (const c of Array.from(node.childNodes)) {
-            if (c.nodeType === node.TEXT_NODE) {
-              node.removeChild(c);
-            }
-          }
-          node.appendChild(child);
+          n.childNodes = []; // value overrides childNodes
           continue;
         }
 
diff --git a/packages/rrweb/test/events/bad-textarea.ts b/packages/rrweb/test/events/bad-textarea.ts
new file mode 100644
index 0000000000..2052944fcd
--- /dev/null
+++ b/packages/rrweb/test/events/bad-textarea.ts
@@ -0,0 +1,80 @@
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
+
+const now = Date.now();
+const events: eventWithTime[] = [
+  {
+    type: EventType.DomContentLoaded,
+    data: {},
+    timestamp: now,
+  },
+  {
+    type: EventType.Load,
+    data: {},
+    timestamp: now + 50,
+  },
+  {
+    type: EventType.Meta,
+    data: {
+      href: 'http://localhost',
+      width: 1000,
+      height: 800,
+    },
+    timestamp: now + 50,
+  },
+  // full snapshot:
+  {
+    data: {
+      node: {
+        id: 1,
+        type: 0,
+        childNodes: [
+          { id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
+          {
+            id: 3,
+            type: 2,
+            tagName: 'html',
+            attributes: { lang: 'en' },
+            childNodes: [
+              {
+                id: 4,
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [],
+              },
+              {
+                id: 5,
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [
+                  {
+                    id: 6,
+                    type: 2,
+                    tagName: 'textarea',
+                    attributes: {
+                      value: 'dupe',
+                    },
+                    childNodes: [
+                      {
+                        type: 3,
+                        textContent: 'dupe should ignore',
+                        id: 7,
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      initialOffset: { top: 0, left: 0 },
+    },
+    type: EventType.FullSnapshot,
+    timestamp: now + 50,
+  },
+];
+
+export default events;
diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts
index 183d2417fb..106582d85e 100644
--- a/packages/rrweb/test/replayer.test.ts
+++ b/packages/rrweb/test/replayer.test.ts
@@ -16,6 +16,7 @@ import inputEvents from './events/input';
 import iframeEvents from './events/iframe';
 import selectionEvents from './events/selection';
 import shadowDomEvents from './events/shadow-dom';
+import textareaEvents from './events/bad-textarea';
 import StyleSheetTextMutation from './events/style-sheet-text-mutation';
 import canvasInIframe from './events/canvas-in-iframe';
 import adoptedStyleSheet from './events/adopted-style-sheet';
@@ -1092,4 +1093,19 @@ describe('replayer', function () {
     // If the custom element is defined, the display value will be 'block'.
     expect(displayValue).toEqual('block');
   });
+
+  it('can deal with legacy duplicate/conflicting values on textareas', async () => {
+    await page.evaluate(`events = ${JSON.stringify(textareaEvents)}`);
+
+    const displayValue = await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.pause(100);
+      const textarea = replayer.iframe.contentDocument.querySelector('textarea');
+      textarea.value;
+    `);
+    // If the custom element is not defined, the display value will be 'none'.
+    // If the custom element is defined, the display value will be 'block'.
+    expect(displayValue).toEqual('dupe');
+  });
 });

From f800b19ba4d249a83fb4e80c86d4fdfc7651b7bc Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Thu, 9 Nov 2023 16:29:53 +0000
Subject: [PATCH 04/12] Fix that textarea values were being missed by the
 masking system if the value was recorded as a child node

 - I didn't notice that form.html was used in other tests, so lucky that I noticed that those tests also should have the 'pre value' masked out
---
 packages/rrweb-snapshot/src/snapshot.ts       |  29 +++--
 .../__snapshots__/integration.test.ts.snap    | 112 ++++++++++++++----
 2 files changed, 113 insertions(+), 28 deletions(-)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 953a493e61..2797b96e87 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -10,6 +10,7 @@ import {
   MaskInputFn,
   KeepIframeSrcFn,
   ICanvas,
+  elementNode,
   serializedElementNodeWithId,
 } from './types';
 import {
@@ -680,10 +681,9 @@ function serializeElementNode(
       attributes.type !== 'button' &&
       value
     ) {
-      const type = getInputType(n);
       attributes.value = maskInputValue({
         element: n,
-        type,
+        type: getInputType(n),
         tagName,
         value,
         maskInputOptions,
@@ -1099,17 +1099,30 @@ export function serializeNodeWithId(
       keepIframeSrcFn,
     };
 
-    if (
+    let isTextarea =
       serializedNode.type === NodeType.Element &&
-      serializedNode.tagName === 'textarea' &&
-      serializedNode.attributes.value !== undefined
+      serializedNode.tagName === 'textarea';
+
+    if (
+      isTextarea &&
+      (serializedNode as elementNode).attributes.value !== undefined
     ) {
       // value parameter in DOM reflects the correct value, so ignore childNode
     } else {
       for (const childN of Array.from(n.childNodes)) {
-        const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
-        if (serializedChildNode) {
-          serializedNode.childNodes.push(serializedChildNode);
+        const serializedChildN = serializeNodeWithId(childN, bypassOptions);
+        if (serializedChildN) {
+          if (isTextarea && serializedChildN.type === NodeType.Text) {
+            serializedChildN.textContent = maskInputValue({
+              element: (n as HTMLElement), // pass in textarea as the element so it can be treated same as if .value was set
+              type: 'textarea',
+              tagName: 'textarea',
+              value: serializedChildN.textContent,
+              maskInputOptions,
+              maskInputFn,
+            });
+          }
+          serializedNode.childNodes.push(serializedChildN);
         }
       }
     }
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index 82166a5203..eaa4c1ae49 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -4510,8 +4510,26 @@ exports[`record integration tests can use maskInputOptions to configure which ty
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 61
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"textarea\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"pre value\\",
+                            \\"id\\": 63
+                          }
+                        ],
+                        \\"id\\": 62
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 64
                       }
                     ],
                     \\"id\\": 18
@@ -4519,7 +4537,7 @@ exports[`record integration tests can use maskInputOptions to configure which ty
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 62
+                    \\"id\\": 65
                   },
                   {
                     \\"type\\": 2,
@@ -4529,15 +4547,15 @@ exports[`record integration tests can use maskInputOptions to configure which ty
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 64
+                        \\"id\\": 67
                       }
                     ],
-                    \\"id\\": 63
+                    \\"id\\": 66
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 65
+                    \\"id\\": 68
                   }
                 ],
                 \\"id\\": 16
@@ -6502,8 +6520,26 @@ exports[`record integration tests should mask inputs via function call 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 61
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"textarea\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"*********\\",
+                            \\"id\\": 63
+                          }
+                        ],
+                        \\"id\\": 62
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 64
                       }
                     ],
                     \\"id\\": 18
@@ -6511,7 +6547,7 @@ exports[`record integration tests should mask inputs via function call 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 62
+                    \\"id\\": 65
                   },
                   {
                     \\"type\\": 2,
@@ -6521,15 +6557,15 @@ exports[`record integration tests should mask inputs via function call 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 64
+                        \\"id\\": 67
                       }
                     ],
-                    \\"id\\": 63
+                    \\"id\\": 66
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 65
+                    \\"id\\": 68
                   }
                 ],
                 \\"id\\": 16
@@ -10189,8 +10225,26 @@ exports[`record integration tests should not record input values if maskAllInput
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 61
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"textarea\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"*********\\",
+                            \\"id\\": 63
+                          }
+                        ],
+                        \\"id\\": 62
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 64
                       }
                     ],
                     \\"id\\": 18
@@ -10198,7 +10252,7 @@ exports[`record integration tests should not record input values if maskAllInput
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 62
+                    \\"id\\": 65
                   },
                   {
                     \\"type\\": 2,
@@ -10208,15 +10262,15 @@ exports[`record integration tests should not record input values if maskAllInput
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 64
+                        \\"id\\": 67
                       }
                     ],
-                    \\"id\\": 63
+                    \\"id\\": 66
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 65
+                    \\"id\\": 68
                   }
                 ],
                 \\"id\\": 16
@@ -13898,8 +13952,26 @@ exports[`record integration tests should record input userTriggered values if us
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 61
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"textarea\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"pre value\\",
+                            \\"id\\": 63
+                          }
+                        ],
+                        \\"id\\": 62
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 64
                       }
                     ],
                     \\"id\\": 18
@@ -13907,7 +13979,7 @@ exports[`record integration tests should record input userTriggered values if us
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 62
+                    \\"id\\": 65
                   },
                   {
                     \\"type\\": 2,
@@ -13917,15 +13989,15 @@ exports[`record integration tests should record input userTriggered values if us
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 64
+                        \\"id\\": 67
                       }
                     ],
-                    \\"id\\": 63
+                    \\"id\\": 66
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 65
+                    \\"id\\": 68
                   }
                 ],
                 \\"id\\": 16

From d0026309339ae685337d60c18706c6fad5fdc416 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Thu, 9 Nov 2023 16:32:23 +0000
Subject: [PATCH 05/12] Need a longer seek here to account for slower recording
 during testing

---
 packages/rrweb/test/integration.test.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index a94b9d9fcd..cd8bc0e7f0 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -109,6 +109,9 @@ describe('record integration tests', function (this: ISuite) {
     const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'empty.html'));
+
+    await new Promise((resolve) => setTimeout(resolve, 20)); // ensure mutations aren't included in fullsnapshot
+
     await page.evaluate(() => {
       const ta = document.createElement('textarea');
       ta.innerText = 'pre value'; // this mutation should be recorded
@@ -147,7 +150,7 @@ describe('record integration tests', function (this: ISuite) {
       const replayer = new Replayer(window.snapshots);
       replayer.pause(100);
       let val = replayer.iframe.contentDocument.querySelector('textarea').value + '|';
-      replayer.pause(250);
+      replayer.pause(300);
       val + replayer.iframe.contentDocument.querySelector('textarea').value;
     `);
     expect(replayResult).toEqual('pre value ok|12pre value ok'); // test at 2 times

From 4bc169a94098aa321d0a165d235adee7ebfc1fad Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Thu, 9 Nov 2023 16:43:33 +0000
Subject: [PATCH 06/12] Make rrweb-snapshot behave like rrweb in that `yarn
 test` causes a rebuild

---
 packages/rrweb-snapshot/package.json | 3 ++-
 packages/rrweb/package.json          | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index 00b2a98f35..a179f36564 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "prepare": "npm run prepack",
     "prepack": "npm run bundle && npm run typings",
-    "test": "jest",
+    "retest": "jest",
+    "test": "yarn bundle && yarn retest",
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot",
     "bundle": "rollup --config",
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index a95f60f380..2315abfec8 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -12,6 +12,7 @@
     "test": "yarn test:headless",
     "test:watch": "yarn test:headless -- --watch",
     "test:update": "yarn test:headless -- --updateSnapshot",
+    "retest:update": "PUPPETEER_HEADLESS=true yarn retest -- --updateSnapshot",
     "repl": "yarn bundle:browser && node scripts/repl.js",
     "live-stream": "yarn bundle:browser && node scripts/stream.js",
     "dev": "yarn bundle:browser --watch",

From 69c9aa3cb1b8214a4400b52dab59fe4ec3646415 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Fri, 10 Nov 2023 10:48:43 +0000
Subject: [PATCH 07/12] Simplify by always storing the textarea value in the
 `.value` attribute (from it's DOM property) and not as a childNode. It should
 still be rebuilt as a childNode rather than a property

---
 packages/rrweb-snapshot/src/snapshot.ts       |  31 +---
 packages/rrweb-snapshot/test/snapshot.test.ts |  11 +-
 packages/rrweb/src/record/mutation.ts         |  45 ++++-
 packages/rrweb/src/replay/index.ts            |  16 +-
 .../__snapshots__/integration.test.ts.snap    | 166 ++++++++----------
 packages/rrweb/test/integration.test.ts       |  34 ++--
 .../cross-origin-iframes.test.ts.snap         |  34 ++--
 7 files changed, 174 insertions(+), 163 deletions(-)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 2797b96e87..301f84430e 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -667,14 +667,6 @@ function serializeElementNode(
     const value = (n as HTMLInputElement | HTMLTextAreaElement).value;
     const checked = (n as HTMLInputElement).checked;
     if (
-      tagName === 'textarea' &&
-      value &&
-      n.childNodes.length === 1 &&
-      n.childNodes[0].nodeType === n.TEXT_NODE &&
-      (n.childNodes[0] as Text).data === value
-    ) {
-      // value will be recorded via the childNode instead
-    } else if (
       attributes.type !== 'radio' &&
       attributes.type !== 'checkbox' &&
       attributes.type !== 'submit' &&
@@ -1099,30 +1091,17 @@ export function serializeNodeWithId(
       keepIframeSrcFn,
     };
 
-    let isTextarea =
-      serializedNode.type === NodeType.Element &&
-      serializedNode.tagName === 'textarea';
-
     if (
-      isTextarea &&
+      serializedNode.type === NodeType.Element &&
+      serializedNode.tagName === 'textarea' &&
       (serializedNode as elementNode).attributes.value !== undefined
     ) {
       // value parameter in DOM reflects the correct value, so ignore childNode
     } else {
       for (const childN of Array.from(n.childNodes)) {
-        const serializedChildN = serializeNodeWithId(childN, bypassOptions);
-        if (serializedChildN) {
-          if (isTextarea && serializedChildN.type === NodeType.Text) {
-            serializedChildN.textContent = maskInputValue({
-              element: (n as HTMLElement), // pass in textarea as the element so it can be treated same as if .value was set
-              type: 'textarea',
-              tagName: 'textarea',
-              value: serializedChildN.textContent,
-              maskInputOptions,
-              maskInputFn,
-            });
-          }
-          serializedNode.childNodes.push(serializedChildN);
+        const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
+        if (serializedChildNode) {
+          serializedNode.childNodes.push(serializedChildNode);
         }
       }
     }
diff --git a/packages/rrweb-snapshot/test/snapshot.test.ts b/packages/rrweb-snapshot/test/snapshot.test.ts
index dc41b33461..11fb644ea7 100644
--- a/packages/rrweb-snapshot/test/snapshot.test.ts
+++ b/packages/rrweb-snapshot/test/snapshot.test.ts
@@ -245,14 +245,11 @@ describe('form', () => {
   it('should record textarea values once', () => {
     const el = render(`<textarea>Lorem ipsum</textarea>`);
     const sel = serializeNode(el) as elementNode;
-    expect(sel?.attributes).toEqual({}); // shouldn't be stored in .value
     expect(sel).toMatchObject({
-      childNodes: [
-        {
-          type: 3,
-          textContent: 'Lorem ipsum',
-        },
-      ],
+      attributes: {
+        value: 'Lorem ipsum',
+      },
     });
+    expect(sel?.childNodes).toEqual([]); // shouldn't be stored in childNodes while in transit
   });
 });
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index 2f6b6550ff..81592e8170 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -285,7 +285,11 @@ export default class MutationBuffer {
       return nextId;
     };
     const pushAdd = (n: Node) => {
-      if (!n.parentNode || !inDom(n)) {
+      if (
+        !n.parentNode ||
+        !inDom(n) ||
+        (n.parentNode as Element).tagName === 'TEXTAREA'
+      ) {
         return;
       }
       const parentId = isShadowRoot(n.parentNode)
@@ -435,10 +439,17 @@ export default class MutationBuffer {
 
     const payload = {
       texts: this.texts
-        .map((text) => ({
-          id: this.mirror.getId(text.node),
-          value: text.value,
-        }))
+        .map((text) => {
+          const n = text.node;
+          if ((n.parentNode as Element).tagName === 'TEXTAREA') {
+            // the node is being ignored as it isn't in the mirror, so shift mutation to attributes on parent textarea
+            this.genTextAreaValueMutation(n.parentNode as HTMLTextAreaElement);
+          }
+          return {
+            id: this.mirror.getId(n),
+            value: text.value,
+          };
+        })
         // no need to include them on added elements, as they have just been serialized with up to date attribubtes
         .filter((text) => !addedIds.has(text.id))
         // text mutation's id was not in the mirror map means the target node has been removed
@@ -497,6 +508,24 @@ export default class MutationBuffer {
     this.mutationCb(payload);
   };
 
+  private genTextAreaValueMutation = (textarea: HTMLTextAreaElement) => {
+    let item = this.attributeMap.get(textarea);
+    if (!item) {
+      item = {
+        node: textarea,
+        attributes: {},
+        styleDiff: {},
+        _unchangedStyles: {},
+      };
+      this.attributes.push(item);
+      this.attributeMap.set(textarea, item);
+    }
+    item.attributes.value = Array.from(
+      textarea.childNodes,
+      (cn) => cn.textContent || '',
+    ).join('');
+  };
+
   private processMutation = (m: mutationRecord) => {
     if (isIgnored(m.target, this.mirror)) {
       return;
@@ -642,6 +671,12 @@ export default class MutationBuffer {
         if (isBlocked(m.target, this.blockClass, this.blockSelector, true))
           return;
 
+        if ((m.target as Element).tagName === 'TEXTAREA') {
+          // children would be ignored in genAdds as they aren't in the mirror
+          this.genTextAreaValueMutation(m.target as HTMLTextAreaElement);
+          return; // any removedNodes won't have been in mirror either
+        }
+
         m.addedNodes.forEach((n) => this.genAdds(n, m.target));
         m.removedNodes.forEach((n) => {
           const nodeId = this.mirror.getId(n);
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index ea6ea6ac77..ab286ee441 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -1763,10 +1763,18 @@ export class Replayer {
                   // for safe
                 }
               }
-              (target as Element | RRElement).setAttribute(
-                attributeName,
-                value,
-              );
+              if (attributeName === 'value' && target.nodeName === 'TEXTAREA') {
+                // this may or may not have an effect on the value property (which is what is displayed)
+                // depending on whether the textarea has been modified by the user yet
+                (target as Element | RRElement).replaceChildren(
+                  document.createTextNode(value),
+                );
+              } else {
+                (target as Element | RRElement).setAttribute(
+                  attributeName,
+                  value,
+                );
+              }
             } catch (error) {
               this.warn(
                 'An error occurred may due to the checkout feature.',
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index eaa4c1ae49..ae1aa7bf54 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -2274,20 +2274,16 @@ exports[`record integration tests can record form interactions 1`] = `
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"textarea\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"pre value\\",
-                            \\"id\\": 63
-                          }
-                        ],
+                        \\"attributes\\": {
+                          \\"value\\": \\"pre value\\"
+                        },
+                        \\"childNodes\\": [],
                         \\"id\\": 62
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 64
+                        \\"id\\": 63
                       }
                     ],
                     \\"id\\": 18
@@ -2295,7 +2291,7 @@ exports[`record integration tests can record form interactions 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 65
+                    \\"id\\": 64
                   },
                   {
                     \\"type\\": 2,
@@ -2305,15 +2301,15 @@ exports[`record integration tests can record form interactions 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 67
+                        \\"id\\": 66
                       }
                     ],
-                    \\"id\\": 66
+                    \\"id\\": 65
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 68
+                    \\"id\\": 67
                   }
                 ],
                 \\"id\\": 16
@@ -4003,34 +3999,46 @@ exports[`record integration tests can record textarea mutations correctly 1`] =
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"textarea\\",
-            \\"attributes\\": {},
+            \\"attributes\\": {
+              \\"value\\": \\"pre value\\"
+            },
             \\"childNodes\\": [],
             \\"id\\": 21
           }
-        },
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
         {
-          \\"parentId\\": 21,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"pre value\\",
-            \\"id\\": 22
+          \\"id\\": 21,
+          \\"attributes\\": {
+            \\"value\\": \\"ok\\"
           }
         }
-      ]
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 0,
-      \\"texts\\": [
+      \\"texts\\": [],
+      \\"attributes\\": [
         {
-          \\"id\\": 22,
-          \\"value\\": \\"pre value ok\\"
+          \\"id\\": 21,
+          \\"attributes\\": {
+            \\"value\\": \\"ok3\\"
+          }
         }
       ],
-      \\"attributes\\": [],
       \\"removes\\": [],
       \\"adds\\": []
     }
@@ -4047,7 +4055,7 @@ exports[`record integration tests can record textarea mutations correctly 1`] =
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 5,
-      \\"text\\": \\"1pre value ok\\",
+      \\"text\\": \\"1ok3\\",
       \\"isChecked\\": false,
       \\"id\\": 21
     }
@@ -4056,17 +4064,15 @@ exports[`record integration tests can record textarea mutations correctly 1`] =
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 0,
-      \\"texts\\": [
-        {
-          \\"id\\": 22,
-          \\"value\\": \\"ignore\\"
-        },
+      \\"texts\\": [],
+      \\"attributes\\": [
         {
-          \\"id\\": 22,
-          \\"value\\": \\"ignore\\"
+          \\"id\\": 21,
+          \\"attributes\\": {
+            \\"value\\": \\"ignore\\"
+          }
         }
       ],
-      \\"attributes\\": [],
       \\"removes\\": [],
       \\"adds\\": []
     }
@@ -4075,7 +4081,7 @@ exports[`record integration tests can record textarea mutations correctly 1`] =
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 5,
-      \\"text\\": \\"12pre value ok\\",
+      \\"text\\": \\"12ok3\\",
       \\"isChecked\\": false,
       \\"id\\": 21
     }
@@ -4516,20 +4522,16 @@ exports[`record integration tests can use maskInputOptions to configure which ty
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"textarea\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"pre value\\",
-                            \\"id\\": 63
-                          }
-                        ],
+                        \\"attributes\\": {
+                          \\"value\\": \\"pre value\\"
+                        },
+                        \\"childNodes\\": [],
                         \\"id\\": 62
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 64
+                        \\"id\\": 63
                       }
                     ],
                     \\"id\\": 18
@@ -4537,7 +4539,7 @@ exports[`record integration tests can use maskInputOptions to configure which ty
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 65
+                    \\"id\\": 64
                   },
                   {
                     \\"type\\": 2,
@@ -4547,15 +4549,15 @@ exports[`record integration tests can use maskInputOptions to configure which ty
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 67
+                        \\"id\\": 66
                       }
                     ],
-                    \\"id\\": 66
+                    \\"id\\": 65
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 68
+                    \\"id\\": 67
                   }
                 ],
                 \\"id\\": 16
@@ -6526,20 +6528,16 @@ exports[`record integration tests should mask inputs via function call 1`] = `
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"textarea\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"*********\\",
-                            \\"id\\": 63
-                          }
-                        ],
+                        \\"attributes\\": {
+                          \\"value\\": \\"*********\\"
+                        },
+                        \\"childNodes\\": [],
                         \\"id\\": 62
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 64
+                        \\"id\\": 63
                       }
                     ],
                     \\"id\\": 18
@@ -6547,7 +6545,7 @@ exports[`record integration tests should mask inputs via function call 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 65
+                    \\"id\\": 64
                   },
                   {
                     \\"type\\": 2,
@@ -6557,15 +6555,15 @@ exports[`record integration tests should mask inputs via function call 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 67
+                        \\"id\\": 66
                       }
                     ],
-                    \\"id\\": 66
+                    \\"id\\": 65
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 68
+                    \\"id\\": 67
                   }
                 ],
                 \\"id\\": 16
@@ -10231,20 +10229,16 @@ exports[`record integration tests should not record input values if maskAllInput
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"textarea\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"*********\\",
-                            \\"id\\": 63
-                          }
-                        ],
+                        \\"attributes\\": {
+                          \\"value\\": \\"*********\\"
+                        },
+                        \\"childNodes\\": [],
                         \\"id\\": 62
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 64
+                        \\"id\\": 63
                       }
                     ],
                     \\"id\\": 18
@@ -10252,7 +10246,7 @@ exports[`record integration tests should not record input values if maskAllInput
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 65
+                    \\"id\\": 64
                   },
                   {
                     \\"type\\": 2,
@@ -10262,15 +10256,15 @@ exports[`record integration tests should not record input values if maskAllInput
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 67
+                        \\"id\\": 66
                       }
                     ],
-                    \\"id\\": 66
+                    \\"id\\": 65
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 68
+                    \\"id\\": 67
                   }
                 ],
                 \\"id\\": 16
@@ -13958,20 +13952,16 @@ exports[`record integration tests should record input userTriggered values if us
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"textarea\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"pre value\\",
-                            \\"id\\": 63
-                          }
-                        ],
+                        \\"attributes\\": {
+                          \\"value\\": \\"pre value\\"
+                        },
+                        \\"childNodes\\": [],
                         \\"id\\": 62
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 64
+                        \\"id\\": 63
                       }
                     ],
                     \\"id\\": 18
@@ -13979,7 +13969,7 @@ exports[`record integration tests should record input userTriggered values if us
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 65
+                    \\"id\\": 64
                   },
                   {
                     \\"type\\": 2,
@@ -13989,15 +13979,15 @@ exports[`record integration tests should record input userTriggered values if us
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 67
+                        \\"id\\": 66
                       }
                     ],
-                    \\"id\\": 66
+                    \\"id\\": 65
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 68
+                    \\"id\\": 67
                   }
                 ],
                 \\"id\\": 16
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index cd8bc0e7f0..f62a841f35 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -114,16 +114,17 @@ describe('record integration tests', function (this: ISuite) {
 
     await page.evaluate(() => {
       const ta = document.createElement('textarea');
-      ta.innerText = 'pre value'; // this mutation should be recorded
+      ta.innerText = 'pre value';
       document.body.append(ta);
     });
-
     await page.evaluate(() => {
       const t = document.querySelector('textarea') as HTMLTextAreaElement;
-      (t.childNodes[0] as Text).appendData(' ok'); // this mutation is also valid
+      t.innerText = 'ok'; // this mutation should be recorded
+    });
+    await page.evaluate(() => {
+      const t = document.querySelector('textarea') as HTMLTextAreaElement;
+      (t.childNodes[0] as Text).appendData('3'); // this mutation is also valid
     });
-
-    await new Promise((resolve) => setTimeout(resolve, 101)); // we will check replay before this
 
     await page.type('textarea', '1'); // types (inserts) at index 0, in front of existing text
 
@@ -145,15 +146,26 @@ describe('record integration tests', function (this: ISuite) {
     )) as eventWithTime[];
     assertSnapshot(snapshots);
 
-    const replayResult = await page.evaluate(`
+    // check after each mutation and text input
+    const replayTextareaValues = await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(window.snapshots);
-      replayer.pause(100);
-      let val = replayer.iframe.contentDocument.querySelector('textarea').value + '|';
-      replayer.pause(300);
-      val + replayer.iframe.contentDocument.querySelector('textarea').value;
+      const vals = [];
+      window.snapshots.filter((e)=>e.data.attributes || e.data.source === 5).forEach((e)=>{
+        replayer.pause((e.timestamp - window.snapshots[0].timestamp)+1);
+        let ts = replayer.iframe.contentDocument.querySelector('textarea');
+        vals.push((e.data.source === 0 ? 'Mutation' : 'User') + ':' + ts.value);
+      });
+      vals;
     `);
-    expect(replayResult).toEqual('pre value ok|12pre value ok'); // test at 2 times
+    expect(replayTextareaValues).toEqual([
+      'Mutation:pre value',
+      'Mutation:ok',
+      'Mutation:ok3',
+      'User:1ok3',
+      'Mutation:1ok3', // if this gets set to 'ignore', it's an error, as the 'user' has modified the textarea
+      'User:12ok3',
+    ]);
   });
 
   it('can record childList mutations', async () => {
diff --git a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
index 7dc39e4b10..a296b53be8 100644
--- a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
+++ b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
@@ -1593,15 +1593,10 @@ exports[`cross origin iframes form.html should map input events correctly 1`] =
                           {
                             \\"type\\": 2,
                             \\"tagName\\": \\"textarea\\",
-                            \\"attributes\\": {},
-                            \\"childNodes\\": [
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"pre value\\",
-                                \\"rootId\\": 11,
-                                \\"id\\": 75
-                              }
-                            ],
+                            \\"attributes\\": {
+                              \\"value\\": \\"pre value\\"
+                            },
+                            \\"childNodes\\": [],
                             \\"rootId\\": 11,
                             \\"id\\": 74
                           },
@@ -1609,7 +1604,7 @@ exports[`cross origin iframes form.html should map input events correctly 1`] =
                             \\"type\\": 3,
                             \\"textContent\\": \\"\\\\n    \\",
                             \\"rootId\\": 11,
-                            \\"id\\": 76
+                            \\"id\\": 75
                           }
                         ],
                         \\"rootId\\": 11,
@@ -1619,7 +1614,7 @@ exports[`cross origin iframes form.html should map input events correctly 1`] =
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
                         \\"rootId\\": 11,
-                        \\"id\\": 77
+                        \\"id\\": 76
                       }
                     ],
                     \\"rootId\\": 11,
@@ -2611,15 +2606,10 @@ exports[`cross origin iframes form.html should map scroll events correctly 1`] =
                           {
                             \\"type\\": 2,
                             \\"tagName\\": \\"textarea\\",
-                            \\"attributes\\": {},
-                            \\"childNodes\\": [
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"pre value\\",
-                                \\"rootId\\": 11,
-                                \\"id\\": 75
-                              }
-                            ],
+                            \\"attributes\\": {
+                              \\"value\\": \\"pre value\\"
+                            },
+                            \\"childNodes\\": [],
                             \\"rootId\\": 11,
                             \\"id\\": 74
                           },
@@ -2627,7 +2617,7 @@ exports[`cross origin iframes form.html should map scroll events correctly 1`] =
                             \\"type\\": 3,
                             \\"textContent\\": \\"\\\\n    \\",
                             \\"rootId\\": 11,
-                            \\"id\\": 76
+                            \\"id\\": 75
                           }
                         ],
                         \\"rootId\\": 11,
@@ -2637,7 +2627,7 @@ exports[`cross origin iframes form.html should map scroll events correctly 1`] =
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
                         \\"rootId\\": 11,
-                        \\"id\\": 77
+                        \\"id\\": 76
                       }
                     ],
                     \\"rootId\\": 11,

From ee4aaaccb3b8948d833eb63cfad2849c97579476 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Fri, 10 Nov 2023 18:45:44 +0000
Subject: [PATCH 08/12] replaceChildNodes is not yet available in RRDom (this
 replacement code was extremely painful to get right from a typings point of
 view)

---
 packages/rrweb/src/replay/index.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index ab286ee441..1febcc401b 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -1766,9 +1766,15 @@ export class Replayer {
               if (attributeName === 'value' && target.nodeName === 'TEXTAREA') {
                 // this may or may not have an effect on the value property (which is what is displayed)
                 // depending on whether the textarea has been modified by the user yet
-                (target as Element | RRElement).replaceChildren(
-                  document.createTextNode(value),
+                // TODO: replaceChildNodes is not available in RRDom
+                const textarea = target as TNode;
+                textarea.childNodes.forEach((c) =>
+                  textarea.removeChild(c as TNode),
                 );
+                const tn = target.ownerDocument?.createTextNode(value);
+                if (tn) {
+                  textarea.appendChild(tn as TNode);
+                }
               } else {
                 (target as Element | RRElement).setAttribute(
                   attributeName,

From 71203c7c6b61c54f103885df6d2a213aa1f0f5f1 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Sat, 11 Nov 2023 16:31:38 +0000
Subject: [PATCH 09/12] Not needed since 8e47ca1021ebb4fc03 - #1157

---
 packages/rrweb-snapshot/src/rebuild.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index 147004038f..10bf067a76 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -5,7 +5,6 @@ import {
   tagMap,
   elementNode,
   BuildCache,
-  attributes,
   legacyAttributes,
 } from './types';
 import { isElement, Mirror, isNodeMetaEqual } from './utils';

From e9b0318a2c58898315bc33866466d2d85d2e8d35 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Fri, 1 Dec 2023 12:02:57 +0100
Subject: [PATCH 10/12] Update packages/rrweb/test/integration.test.ts

---
 packages/rrweb/test/integration.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index f62a841f35..616b6e91cb 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -110,7 +110,7 @@ describe('record integration tests', function (this: ISuite) {
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'empty.html'));
 
-    await new Promise((resolve) => setTimeout(resolve, 20)); // ensure mutations aren't included in fullsnapshot
+    await waitForRAF(page); // ensure mutations aren't included in fullsnapshot
 
     await page.evaluate(() => {
       const ta = document.createElement('textarea');

From 302f855b3037abda1ba912a6cf033f4340897d5b Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Fri, 1 Dec 2023 12:11:38 +0000
Subject: [PATCH 11/12] Improvements to test documentation; with Justin's help
 for better comprehension of why we are doing things this way

---
 packages/rrweb-snapshot/test/snapshot.test.ts | 4 ++++
 packages/rrweb/test/events/bad-textarea.ts    | 4 ++--
 packages/rrweb/test/replayer.test.ts          | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/rrweb-snapshot/test/snapshot.test.ts b/packages/rrweb-snapshot/test/snapshot.test.ts
index 11fb644ea7..aa4bb428ee 100644
--- a/packages/rrweb-snapshot/test/snapshot.test.ts
+++ b/packages/rrweb-snapshot/test/snapshot.test.ts
@@ -245,6 +245,10 @@ describe('form', () => {
   it('should record textarea values once', () => {
     const el = render(`<textarea>Lorem ipsum</textarea>`);
     const sel = serializeNode(el) as elementNode;
+
+    // we serialize according to where the DOM stores the value, not how
+    // the HTML stores it (this is so that maskInputValue can work over
+    // inputs/textareas/selects in a uniform way)
     expect(sel).toMatchObject({
       attributes: {
         value: 'Lorem ipsum',
diff --git a/packages/rrweb/test/events/bad-textarea.ts b/packages/rrweb/test/events/bad-textarea.ts
index 2052944fcd..8da18a4ee3 100644
--- a/packages/rrweb/test/events/bad-textarea.ts
+++ b/packages/rrweb/test/events/bad-textarea.ts
@@ -54,12 +54,12 @@ const events: eventWithTime[] = [
                     type: 2,
                     tagName: 'textarea',
                     attributes: {
-                      value: 'dupe',
+                      value: 'this value is used for replay',
                     },
                     childNodes: [
                       {
                         type: 3,
-                        textContent: 'dupe should ignore',
+                        textContent: 'this value is IGNORED for replay (but was present as a duplicte in legacy recordings)',
                         id: 7,
                       },
                     ],
diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts
index 106582d85e..a5ad37f761 100644
--- a/packages/rrweb/test/replayer.test.ts
+++ b/packages/rrweb/test/replayer.test.ts
@@ -1106,6 +1106,6 @@ describe('replayer', function () {
     `);
     // If the custom element is not defined, the display value will be 'none'.
     // If the custom element is defined, the display value will be 'block'.
-    expect(displayValue).toEqual('dupe');
+    expect(displayValue).toEqual('this value is used for replay');
   });
 });

From 9df40e4cdfc0ce75148efb7b71ee41d32e437310 Mon Sep 17 00:00:00 2001
From: eoghanmurray <eoghanmurray@users.noreply.github.com>
Date: Fri, 1 Dec 2023 12:13:13 +0000
Subject: [PATCH 12/12] Apply formatting changes

---
 packages/rrweb/test/events/bad-textarea.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/rrweb/test/events/bad-textarea.ts b/packages/rrweb/test/events/bad-textarea.ts
index 8da18a4ee3..ad2a6ebb63 100644
--- a/packages/rrweb/test/events/bad-textarea.ts
+++ b/packages/rrweb/test/events/bad-textarea.ts
@@ -59,7 +59,8 @@ const events: eventWithTime[] = [
                     childNodes: [
                       {
                         type: 3,
-                        textContent: 'this value is IGNORED for replay (but was present as a duplicte in legacy recordings)',
+                        textContent:
+                          'this value is IGNORED for replay (but was present as a duplicte in legacy recordings)',
                         id: 7,
                       },
                     ],