Don't trust the html 'value' attribute on <option> - the DOM .selected is the one we want I think. (#651)

- encountered inconsistent html with multiple <option> elements with the same value attribute
 - due to check `attributes.selected = (n as HTMLOptionElement).selected;` the extra ones were being stored as `selected: false`; furthermore, the `false` value was being ignored upon replay, and so the last of the extra ones was being chosen as the 'selected' option

packages/rrweb-snapshot/src/rebuild.ts

@@ -149,6 +149,10 @@ function buildNode(
           continue;
         }
         let value = n.attributes[name];
+        if (tagName === 'option' && name === 'selected' && value === false) {
+          // legacy fix (TODO: if `value === false` can be generated for other attrs, should we also omit those other attrs from build?)
+          continue;
+        }
         value =
           typeof value === 'boolean' || typeof value === 'number' ? '' : value;
         // attribute names start with rr_ are internal attributes added by rrweb

packages/rrweb-snapshot/src/snapshot.ts

@@ -458,9 +458,12 @@ function serializeNode(
         }
       }
       if (tagName === 'option') {
-        const selectValue = (n as HTMLOptionElement).parentElement;
-        if (attributes.value === (selectValue as HTMLSelectElement).value) {
-          attributes.selected = (n as HTMLOptionElement).selected;
+        if ((n as HTMLOptionElement).selected) {
+          attributes.selected = true;
+        } else {
+          // ignore the html attribute (which corresponds to DOM (n as HTMLOptionElement).defaultSelected)
+          // if it's already been changed
+          delete attributes.selected;
         }
       }
       // canvas image data