feat: add observer for 'selected' setter of HTMLOptionElement and try to fix issue #746

Author: YunFeng0817

packages/rrweb-snapshot/src/snapshot.ts

@@ -80,10 +80,10 @@ let canvasCtx: CanvasRenderingContext2D | null;
 
 function initCanvasService(doc: Document) {
   if (!canvasService) {
-      canvasService = doc.createElement('canvas');
+    canvasService = doc.createElement('canvas');
   }
   if (!canvasCtx) {
-      canvasCtx = canvasService.getContext('2d');
+    canvasCtx = canvasService.getContext('2d');
   }
   canvasService.width = 0;
   canvasService.height = 0;
@@ -502,7 +502,7 @@ function serializeNode(
         }
       }
       if (tagName === 'option') {
-        if ((n as HTMLOptionElement).selected) {
+        if ((n as HTMLOptionElement).selected && !maskInputOptions['select']) {
           attributes.selected = true;
         } else {
           // ignore the html attribute (which corresponds to DOM (n as HTMLOptionElement).defaultSelected)
@@ -516,7 +516,7 @@ function serializeNode(
       }
       // save image offline
       if (tagName === 'img' && inlineImages && canvasService && canvasCtx) {
-        const image = (n as HTMLImageElement);
+        const image = n as HTMLImageElement;
         image.crossOrigin = 'anonymous';
         try {
           canvasService.width = image.naturalWidth;

packages/rrweb/src/record/observer.ts

@@ -369,8 +369,10 @@ function initInputObserver(
   userTriggeredOnInput: boolean,
 ): listenerHandler {
   function eventHandler(event: Event) {
-    const target = getEventTarget(event);
+    let target = getEventTarget(event);
     const userTriggered = event.isTrusted;
+    if (target && (target as Element).tagName === 'OPTION')
+      target = (target as Element).parentElement;
     if (
       !target ||
       !(target as Element).tagName ||
@@ -461,6 +463,7 @@ function initInputObserver(
     [HTMLTextAreaElement.prototype, 'value'],
     // Some UI library use selectedIndex to set select value
     [HTMLSelectElement.prototype, 'selectedIndex'],
+    [HTMLOptionElement.prototype, 'selected'],
   ];
   if (propertyDescriptor && propertyDescriptor.set) {
     handlers.push(

packages/rrweb/test/__snapshots__/integration.test.ts.snap

@@ -6066,8 +6066,7 @@ exports[`record integration tests should not record input values if maskAllInput
                                 \\"type\\": 2,
                                 \\"tagName\\": \\"option\\",
                                 \\"attributes\\": {
-                                  \\"value\\": \\"1\\",
-                                  \\"selected\\": true
+                                  \\"value\\": \\"1\\"
                                 },
                                 \\"childNodes\\": [
                                   {