Skip to content
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.

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

[Bug] [CodeReiview] regarding to textarea count calculating #1370

Closed
yanCode opened this issue May 10, 2023 · 1 comment
Closed

[Bug] [CodeReiview] regarding to textarea count calculating #1370

yanCode opened this issue May 10, 2023 · 1 comment

Comments

@yanCode
Copy link
Contributor

yanCode commented May 10, 2023

hI @Yidadaa , first let me say sorry that I didn't address the last issue in my PR #1359

I see you provided a fix 9b1f251 to this problem.

but I found the two issues are still there after I pulled the latest code:

  1. When you input hello following many line breaks, aka \n\n\n, you can see the cursor pointer goes up still
    curorpointgoesup

  2. if you intput many line breaks, you can see the height of the textarea doesn't increase, instead it shows a scroll bar in the right side the text area.
    cursorgoesdown

I came back to the inital code before I made my PR #1359 , and make sure I understand every line of code. now let me explain the reason:

First, I have to say the solution in your codebase to calculate the row num is a genius solution! basically, it adds up 2 two values:

-- Copy the content from the textarea to a hidden span named __measure, then calcuate how many rows the content of __measure needs.
-- a second logic, count the number of \n, to get how many rows required by line breakers.

but the problem come from here, in which it sets the content of __measure:

measureDom.innerText = dom.value.trim().length > 0 ? dom.value : "1";

so when the input content is \n\n\n\n\nn\n\nn\n\n, which makes dom.value.trim().length > 0 false, it sets the innerText of __measure to be "1" as in only one line. while the logic counting \n returns correct line count made by line breakers. adding these 2 values can result in correct row number for the text area.

however when the input content becomes hello\n\n\n\n\nn\n\nn\n\n, as dom.value.trim().length > 0 becomes ture, so the content of __measure is set to hello\n\n\n\n\nn\n\nn\n\n, in my tests, both Firefox and chrome honestly interpret each \n to be a <br>, which is a new line, so the line number calculated from __measure is already the actually row num for the input textarea. . after adding the line num from counting \n, well, the row number are duplicated.

Based on my researh that both firebox and chrome render \n correctly in __measure I think the fix can be allowing to set the contents like \n\n\n\n\nn\n\nn\n\n to __measure, let it calculate the row num only, without adding extra num by counting \n.

meanwhile , I am going create a new PR

@Yidadaa
Copy link
Collaborator

Yidadaa commented May 10, 2023

You are right, thanks for your excellent work! I will approve this PR after the building success.

@Yidadaa Yidadaa closed this as completed May 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants