xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

* style: add description of mechanism
This commit is contained in:
Yun Feng
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 0153270680
commit b277b9a7a6
3 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/rrweb-snapshot/src/snapshot.ts
View File

@@ -491,7 +491,7 @@ function serializeNode(
} }
} }
if (tagName === 'option') { if (tagName === 'option') {
if ((n as HTMLOptionElement).selected) { if ((n as HTMLOptionElement).selected && !maskInputOptions['select']) {
attributes.selected = true; attributes.selected = true;
} else { } else {
// ignore the html attribute (which corresponds to DOM (n as HTMLOptionElement).defaultSelected) // ignore the html attribute (which corresponds to DOM (n as HTMLOptionElement).defaultSelected)

9
packages/rrweb/src/record/observer.ts
View File

@@ -371,8 +371,14 @@ function initInputObserver(
userTriggeredOnInput: boolean, userTriggeredOnInput: boolean,
): listenerHandler { ): listenerHandler {
function eventHandler(event: Event) { function eventHandler(event: Event) {
const target = getEventTarget(event); let target = getEventTarget(event);
const userTriggered = event.isTrusted; const userTriggered = event.isTrusted;
/**
* If a site changes the value 'selected' of an option element, the value of its parent element, usually a select element, will be changed as well.
* We can treat this change as a value change of the select element the current target belongs to.
*/
if (target && (target as Element).tagName === 'OPTION')
target = (target as Element).parentElement;
if ( if (
!target || !target ||
!(target as Element).tagName || !(target as Element).tagName ||
@@ -463,6 +469,7 @@ function initInputObserver(
[HTMLTextAreaElement.prototype, 'value'], [HTMLTextAreaElement.prototype, 'value'],
// Some UI library use selectedIndex to set select value // Some UI library use selectedIndex to set select value
[HTMLSelectElement.prototype, 'selectedIndex'], [HTMLSelectElement.prototype, 'selectedIndex'],
[HTMLOptionElement.prototype, 'selected'],
]; ];
if (propertyDescriptor && propertyDescriptor.set) { if (propertyDescriptor && propertyDescriptor.set) {
handlers.push( handlers.push(

3
packages/rrweb/test/__snapshots__/integration.test.ts.snap
View File

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