Make sure tooltip is linked to input field with error and is shown under the input field even when scrolling the page

[Lionqueen94]

• Link tooltip to error in DOM for accessibility and testing
• Make sure tooltip is positioned correctly after scrolling, window/viewport resizing, zooming
• Make sure only the desired keypresses cause the tooltip to disappear. Currently any keypress makes the tooltip disappear, e.g. when hitting ctrl to change the zoom level of the browser using the keyboard.
• Make sure there are no warning or errors in the console. Current implementation throws a "two children with the same key" error and a "Source map error" warning, when pasting twice in the same field.
• Write tests for tooltip rendering and positioning

Reproduction steps:

• scroll the page
• paste 'abc' in an input
• expected: the tooltip is shown below the input
• observed: the tooltip is shown somewhere else

To discuss: What should the tooltip say when pasting an image or a file? Currently it says "Je probeert te plakken. Je kunt hier alleen cijfers invullen." (example here) Would be nice if the tooltip mentions what you're trying to paste, as it does in the other cases.

[jorisleker]

Not sure if 're-rendered' is the right phrasing for this issue 👼 . We want the tooltip it to stay with the input field when scrolling. Re-rendering is a solution, not necessarily the solution.

[Lionqueen94]

Title changed based on @jorisleker comment

[jschuurk-kr]

For testing copy-paste behavior in Playwright:

• The two options for copy-pasting in Playwright are navigator.clipboard or keyboard.press("Control+C") / keyboard.press("Control+V").
• There is no clipboard isolation between different tests. See Playwright issues 13097, 15860, 8114 for discussion and example implementations of lockers.

Writing to the clipboard with navigator.clipboard.writeText() and then pasting with press('Control+v') works on Chrome and Firefox, not on Safari. Does not work as in: the "paste" does not happen.