fix(textarea): ensure the position of hiddenTextarea stay within the boundaries…

[zhang759740844]

Description

hey, I am using the textarea to show a long article with some annotation. And I found if I want to enter new lines at the end of the textarea whose parent element is overflow hidden, the position of hiddenTextarea will exceed the boundaries of document. And it make whole element shift up.

It seems to be similar to issue #9886, but he does't replicate the bug, so I make a example https://jsfiddle.net/zacharyzch/L4sy3gu1/134/

here's the screenshot:

https://github.com/fabricjs/fabric.js/assets/16117034/5ba2dba7-f09c-4af0-a542-37b920e070dc

In Action

• In _calcTextareaPosition, add a additional check at last, to check the position of hiddenTextarea
• remove the default border and marginbottom of the hiddenTextarea，to make the height of hiddenTextarea is equal to charHeight

and here’s the improved result：

https://github.com/fabricjs/fabric.js/assets/16117034/c4cfc237-8364-49d7-aa61-66e163baa974

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[asturur]

I didn't forget about this, i have been doing other stuff

[mhieupham1]

i think the issue in your css styles, not fabricjs bug, why it scroll when a new line is added, it is for touchscreen devices use virtual keyboard

[zhang759740844]

i think the issue in your css styles, not fabricjs bug, why it scroll when a new line is added, it is for touchscreen devices use virtual keyboard

I don't think it's a CSS issue. Setting the outermost div to overflow:hidden is a common practice. Moreover, the same problem exists on mobile devices as well.

[asturur]

Sorry for not coming back yet

[zhang759740844]

Is there any movement on this? ToT

[asturur]

No but as you see is top of the list of the PRs. The issue with this PR is that testing is a mess. I need to setup usecases where the logic can be tried

[lecramr]

I think I also encountered this bug now in real world, to be print conform I have a pretty large canvas, and scale it down for the user to view it better via css transform scale and now this also happens to me.

[asturur]

This needs to be fixed and tested properly. What blocks me to do so is that i need so many test cases and devices to do so is an enormous amount of time. I need the test cases first of all. I would appreciate if someone could build a bunch of html layouts that we can keep around to test those cases. We need to consider with scrolling, without scrolling, in a modal style div, in a scrolled page.

I usually add a file in the testcases folder, but in this case we need to change the html layout and i don't have a quick way to do that