Skip to content

fix(ion-textarea) autoGrow does not fire when style display changes c… #23734

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

Closed
wants to merge 2 commits into from

Conversation

Sitronik
Copy link

@Sitronik Sitronik commented Aug 6, 2021

Hello ionic team, I described this problem here
#21242 (comment)

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?

The runAutoGrow function does not fire and the height for the element is not set

What is the new behavior?

If the element is initialized on the page with display: none and then after a while becomes display: block the runAutoGrow function will be called

Does this introduce a breaking change?

  • Yes
  • No

Other information

Sample code with a bug
https://github.com/Sitronik/ionic-vue-bug-textarea

@github-actions github-actions bot added the package: core @ionic/core package label Aug 6, 2021
@Sitronik
Copy link
Author

Hello @willmartindev, please take a few minutes, there is not much code 😉

Copy link

@nkalupahana nkalupahana left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested -- this fixes the problem. Let's get this merged! @willmartian

@masimplo
Copy link
Contributor

Hello everyone, this is still an issue on the latest Ionic framework release (v6.0.12 at the time of writing). I know you have a lot on your plate, but this issue makes our apps look bad as its effects are very apparent and happens in every modal that has a textarea on it, so if possible address this in a timely manner.

@toxaq
Copy link

toxaq commented May 3, 2022

If you're here because #21242 is locked and you can't comment but still need a workaround, you can try something like this:

<ion-textarea placeholder="Write something..." [(ngModel)]="content" [autoGrow]="(content?.length||0) > 0"></ion-textarea>

This simply turns off autogrow until there is some content on which to base the growth on (which is the cause of the issue).

@sean-perkins
Copy link
Contributor

Hello @Sitronik thanks for this PR!

I am going to close this in favor of: #24205 which will be included in 6.2.0 🎉 .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants