Fix serialization and mutation of <textarea> elements

.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

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",

packages/rrweb-snapshot/src/rebuild.ts

@@ -5,7 +5,6 @@
   tagMap,
   elementNode,
   BuildCache,
-  attributes,
   legacyAttributes,
 } from './types';
 import { isElement, Mirror, isNodeMetaEqual } from './utils';
@@ -200,14 +199,9 @@
           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;
         }
 
@@ -496,7 +490,7 @@
 
   for (const id of mirror.getIds()) {
     if (mirror.has(id)) {
       walk(mirror.getNode(id)!);
     }
   }
 }

packages/rrweb-snapshot/src/snapshot.ts

@@ -10,6 +10,7 @@
   MaskInputFn,
   KeepIframeSrcFn,
   ICanvas,
+  elementNode,
   serializedElementNodeWithId,
 } from './types';
 import {
@@ -252,7 +253,7 @@
 export function ignoreAttribute(
   tagName: string,
   name: string,
   _value: unknown,
 ): boolean {
   return (tagName === 'video' || tagName === 'audio') && name === 'autoplay';
 }
@@ -390,7 +391,7 @@
   iframeEl.addEventListener('load', listener);
 }
 
 function isStylesheetLoaded(link: HTMLLinkElement) {
   if (!link.getAttribute('href')) return true; // nothing to load
   return link.sheet !== null;
 }
@@ -555,7 +556,7 @@
         // So we'll be conservative and keep textContent as-is.
       } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
         textContent = stringifyStylesheet(
           (n.parentNode as HTMLStyleElement).sheet!,
         );
       }
     } catch (err) {
@@ -644,7 +645,7 @@
     if (cssText) {
       delete attributes.rel;
       delete attributes.href;
       attributes._cssText = absoluteToStylesheet(cssText, stylesheet!.href!);
     }
   }
   // dynamic stylesheet
@@ -672,10 +673,9 @@
       attributes.type !== 'button' &&
       value
     ) {
-      const type = getInputType(n);
       attributes.value = maskInputValue({
         element: n,
-        type,
+        type: getInputType(n),
         tagName,
         value,
         maskInputOptions,
@@ -738,10 +738,10 @@
     const recordInlineImage = () => {
       image.removeEventListener('load', recordInlineImage);
       try {
         canvasService!.width = image.naturalWidth;
         canvasService!.height = image.naturalHeight;
         canvasCtx!.drawImage(image, 0, 0);
         attributes.rr_dataURL = canvasService!.toDataURL(
           dataURLOptions.type,
           dataURLOptions.quality,
         );
@@ -1090,10 +1090,19 @@
       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 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);
+        }
       }
     }
 

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\\">

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>

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,42 @@ 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;
+
+    // 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',
+      },
+    });
+    expect(sel?.childNodes).toEqual([]); // shouldn't be stored in childNodes while in transit
+  });
+});

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",

packages/rrweb/src/record/mutation.ts

@@ -285,7 +285,11 @@
       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)
@@ -344,13 +348,13 @@
     };
 
     while (this.mapRemoves.length) {
       this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
     }
 
     for (const n of this.movedSet) {
       if (
         isParentRemoved(this.removes, n, this.mirror) &&
         !this.movedSet.has(n.parentNode!)
       ) {
         continue;
       }
@@ -435,10 +439,17 @@
 
     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 @@
     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 @@
         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);

packages/rrweb/src/replay/index.ts

@@ -884,7 +884,7 @@
         sn?.type === NodeType.Element &&
         sn?.tagName.toUpperCase() === 'HTML'
       ) {
         const { documentElement, head } = iframeEl.contentDocument!;
         this.insertStyleRules(
           documentElement as HTMLElement | RRElement,
           head as HTMLElement | RRElement,
@@ -903,14 +903,14 @@
     };
 
     buildNodeWithSN(mutation.node, {
       doc: iframeEl.contentDocument! as Document,
       mirror: mirror as Mirror,
       hackCss: true,
       skipChild: false,
       afterAppend,
       cache: this.cache,
     });
     afterAppend(iframeEl.contentDocument! as Document, mutation.node.id);
 
     for (const { mutationInQueue, builtNode } of collected) {
       this.attachDocumentToIframe(mutationInQueue, builtNode);
@@ -999,7 +999,7 @@
   private async preloadAllImages(): Promise<void[]> {
     let beforeLoadState = this.service.state;
     const stateHandler = () => {
       beforeLoadState = this.service.state;
     };
     this.emitter.on(ReplayerEvents.Start, stateHandler);
     this.emitter.on(ReplayerEvents.Pause, stateHandler);
@@ -1032,8 +1032,8 @@
       const ctx = canvas.getContext('2d');
       const imgd = ctx?.createImageData(canvas.width, canvas.height);
       let d = imgd?.data;
       d = JSON.parse(data.args[0]) as Uint8ClampedArray;
       ctx?.putImageData(imgd!, 0, 0);
     }
   }
   private async deserializeAndPreloadCanvasEvents(
@@ -1370,7 +1370,7 @@
     // Only apply virtual dom optimization if the fast-forward process has node mutation. Because the cost of creating a virtual dom tree and executing the diff algorithm is usually higher than directly applying other kind of events.
     if (this.config.useVirtualDom && !this.usingVirtualDom && isSync) {
       this.usingVirtualDom = true;
       buildFromDom(this.iframe.contentDocument!, this.mirror, this.virtualDom);
       // If these legacy missing nodes haven't been resolved, they should be converted to virtual nodes.
       if (Object.keys(this.legacy_missingNodeRetryMap).length) {
         for (const key in this.legacy_missingNodeRetryMap) {
@@ -1487,7 +1487,7 @@
         // If the parent is attached a shadow dom after it's created, it won't have a shadow root.
         if (!hasShadowRoot(parent)) {
           (parent as Element | RRElement).attachShadow({ mode: 'open' });
           parent = (parent as Element | RRElement).shadowRoot! as Node | RRNode;
         } else parent = parent.shadowRoot as Node | RRNode;
       }
 
@@ -1564,6 +1564,8 @@
         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
@@ -1761,10 +1763,24 @@
                   // 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
+                // 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,
+                  value,
+                );
+              }
             } catch (error) {
               this.warn(
                 'An error occurred may due to the checkout feature.',