Skip to content

fix: textarea value is being duplicated #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 24, 2023
Merged

fix: textarea value is being duplicated #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a487de
fix: textarea duplicate values
billyvg Feb 23, 2023
e149c8d
add comments, remove test from different branch
billyvg Feb 23, 2023
06f78b5
remove textarea textContent, only use value
billyvg Feb 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 3 additions & 14 deletions packages/rrweb-snapshot/src/snapshot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 &&
Expand Down Expand Up @@ -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';
}
}
1 change: 1 addition & 0 deletions packages/rrweb-snapshot/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
5 changes: 4 additions & 1 deletion packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,10 @@ exports[`integration tests [html file]: form-fields.html 1`] = `
<input type="checkbox" checked="" />
</label>
<label for="textarea">
<textarea name="" id="" cols="30" rows="10">1234</textarea>
<textarea name="" id="textarea1" cols="30" rows="10">1234</textarea>
</label>
<label for="textarea">
<textarea name="" id="textarea2" cols="30" rows="10">5678</textarea>
</label>
<label for="select">
<select name="" id="" value="2">
Expand Down
8 changes: 6 additions & 2 deletions packages/rrweb-snapshot/test/html/form-fields.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@
<input type="checkbox" />
</label>
<label for="textarea">
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="textarea1" cols="30" rows="10"></textarea>
</label>
<label for="textarea">
<textarea name="" id="textarea2" cols="30" rows="10"></textarea>
</label>
<label for="select">
<select name="" id="">
Expand All @@ -36,7 +39,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('#textarea1').value = '1234';
document.querySelector('#textarea2').textContent = '5678';
document.querySelector('select').value = '2';
</script>
</html>
Loading