fix(textarea): textarea with autogrow will size to its contents

[sean-perkins]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Resize behavior currently is using the scroll height of the control, to resize the outer container. This results in flaky behavior where the textarea will not correctly grow to its contents.

Issue Number: #24793, #21242

What is the new behavior?

• Textarea sizing is controlled through a pseudo element with the same visual appearance as the textarea (only hidden)
• Pseudo element reflows naturally, without manually assigning container height: (inspired from: https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/).
• Re-introduces screenshot tests for auto-grow behavior

Does this introduce a breaking change?

• Yes
• No

Other information

[Lxstr]

Hi @sean-perkins. I would really like to try this solution but I am having trouble using a forked @ionic/core in my stenciljs project. I did manage a while ago as I was having trouble with textarea https://github.com/ionic-team/ionic-framework/issues/21242 but for the life of me can't figure out how I did it. I have looked at the contributing guide but it's vague. And I've tried npm link but got confused.

So far I have

• forked ionic-framework
• cloned to laptop
• merged feat/textarea-auto-grow to main
• $ cd /core
• $ npm run build
• removed anything in .gitignore starting with core/
• commited the build
• pushed to remote (https://github.com/Lxstr/ionic-framework.git)

From here how would I use this build in a way that I could easily swap back and forth with the real ionic release?

Ideally have both installed in my project and just import the one I want to test in the appropriate component.

Thanks in advance

[Lxstr]

I've tested the new textarea and the bugs I was previously experiencing seem to be solved!! Awesome!

However, I do notice issues with the padding. It seems like the ::after elements is creating so much padding that it seems like an entire extra line is added at the bottom of the textarea that is un-useable.

I think the expectation would be little to no padding that the user can then add if required on textareas?

Thanks again for the fix and looking forward to the merge!

[sean-perkins]

This PR is on hold until we finish our Playwright integration (being able to test across different browsers). Will rebase/resolve merge conflicts at that time.

[anagstef]

Hello everyone! This PR indeed fixes all the issues we have with textarea and autogrow. Thank you for resolving them!!!

Is this getting prioritised anytime soon? I see that some Playwright PRs are merged.

Would love to help if I can. Thank you again! :)

[sean-perkins]

Since Playwright was merged in with our 6.1.0 work, this PR is ready to be worked on and updated for 6.2.0. I cannot commit to a timeline on 6.2, since we just released, but you can expect this feature to be included in those changes.

[liamdebeasi]

There is also some strange flickering on iOS 13:

ios13-render.mov

[sean-perkins]

@liamdebeasi good find. Looks like iOS 13 has some rendering difficulties with grid-area with multiple elements in a single container.

To work around this, the reflected pseudo element will be the only element affecting the layout. The native textarea will be absolutely positioned and fill the container's height when the textarea is using auto grow.

This appears to resolve the iOS 13 rendering bug and maintains auto grow behavior.

[liamdebeasi]

It looks like this may actually be a scroll assist issue with duplicating the input while we adjust the scroll position

autogrow-flicker.mp4

Setting the following "fixes" the issue:

window.Ionic = {
    config: {
      scrollAssist: false
    }
  }

[sean-perkins]

Ok I have no clue how my previous "fix" was working, because when running again I ran into the same behavior you noted. It was caused by the scroll assist.

Added a workaround that increases the height of the cloned input (textarea) to the height of the container (100%) when used with auto grow.

Confirmed on iOS 13 simulator that this resolves the white box rendering.

[liamdebeasi]

Good to go when the comments below are addressed. Great job!