From 00c5d285b44293c6e2e2d834b05a22aa6ed32966 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Fri, 24 Feb 2023 08:47:18 -0500 Subject: [PATCH] fix: textarea value is being duplicated (#62) Fix bug introduced in https://github.com/getsentry/rrweb/pull/43 where we masked both textarea's `value` and `textContent`, which meant the text inside of the textarea would get duplicated. We can ignore `textContent` in this case and set it to an empty string. --- packages/rrweb-snapshot/src/snapshot.ts | 17 +- packages/rrweb-snapshot/src/utils.ts | 1 + .../__snapshots__/integration.test.ts.snap | 5 +- .../rrweb-snapshot/test/html/form-fields.html | 8 +- .../__snapshots__/integration.test.ts.snap | 1496 ++++++++++++++++- packages/rrweb/test/html/empty.html | 11 + packages/rrweb/test/integration.test.ts | 146 +- 7 files changed, 1626 insertions(+), 58 deletions(-) create mode 100644 packages/rrweb/test/html/empty.html diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts index 0f2af24876..e60c96fab6 100644 --- a/packages/rrweb-snapshot/src/snapshot.ts +++ b/packages/rrweb-snapshot/src/snapshot.ts @@ -718,19 +718,8 @@ function serializeNode( } if (parentTagName === 'TEXTAREA' && textContent) { - // Ensure that textContent === attribute.value - // (masking options can make them different) - // replay will remove duplicate textContent. - textContent = maskInputValue({ - input: n.parentNode as HTMLElement, - maskInputSelector, - unmaskInputSelector, - maskInputOptions, - tagName: parentTagName, - type: null, - value: textContent, - maskInputFn, - }); + // textarea textContent should be masked via `value` attributes + textContent = ''; } else if ( !isStyle && !isScript && @@ -1249,4 +1238,4 @@ export default snapshot; /** We want to skip `autoplay` attribute, as this has weird results when replaying. */ function skipAttribute(tagName: string, attributeName: string, value?: unknown) { return (tagName === 'video' || tagName === 'audio') && attributeName === 'autoplay'; -} \ No newline at end of file +} diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts index 15adc27590..adbd8797b9 100644 --- a/packages/rrweb-snapshot/src/utils.ts +++ b/packages/rrweb-snapshot/src/utils.ts @@ -37,6 +37,7 @@ export function maskInputValue({ if ( maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] || maskInputOptions[type as keyof MaskInputOptions] || + (tagName === 'input' && !type && maskInputOptions['text']) || // For inputs without a "type" attribute defined (maskInputSelector && input.matches(maskInputSelector)) ) { if (maskInputFn) { diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap index dbcc8c4cae..ad97b9a9f9 100644 --- a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap @@ -232,7 +232,10 @@ exports[`integration tests [html file]: form-fields.html 1`] = ` + +