- When using React/Typescript, I have a function that shows user input:
function displayMessage({ message }: UserMessage) {
return (
<div>
{message.split('\n').map((line) => (
<Fragment>{line}</Fragment>
))}
</div>
);
}
The issue arises when triple clicking to copy and paste the text. An extra line is added in the pasted content like so:
Input One-liner:
random text
Output Two-liner:
random text
Input: Multiple Lines
line1
line2
line3
Output: Multiple Lines.
This occurs only after selecting with three clicks, copying, and then pasting. The problem does not occur with normal two-click selection :/
line1
line2
line3
I attempted adjusting the CSS using the whiteSpace property, but it had no effect. :(
The issue persists across Firefox, Chrome, and Edge browsers.
Edit 1:
The operating system being used is Windows. Testing on other operating systems has not been done.
Edit 2:
I suspect that the HTML tag is included in the copied text along with the three-click selection or "Over-selecting," resulting in the extra line break upon pasting.
A similar problem can be observed widely on the internet. For instance, visit Worldcounter.net Here is an image displaying the outcome from the world counter!
Try copying the selected text as shown in the image, then paste it :)