feat: ion-textarea minRows/maxRows

[ctfrancia]

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

according to the docs there is a rows and cols attributes but there is no maxRows and maxCols the former being important bing very useful when dealing with native since if someone writes a message or something that is longer I don't want the autoGrow directive to take over the entire screen
Describe Preferred Solution

essentially it would be nice to have these abilities to impliment instead of using a 3rd party package to fulfill a min/max rows/cols
Describe Alternatives

Related Code

current implementation:

          <textarea
            autosize
            [minRows]="1"
            [maxRows]="4"
            [(ngModel)]="message"
            placeholder="escribe aqui"
            class="msg-input"
            (keydown)="onKeydown($event)"
            (click)="scrollToBottom()"
          ></textarea>

desired outcome:

          <ion-textarea
            autoGrow
            [minRows]="1"
            [maxRows]="4"
            [(ngModel)]="message"
            placeholder="escribe aqui"
            class="msg-input"
            (keydown)="onKeydown($event)"
            (click)="scrollToBottom()"
          ></ion-textarea>

Additional Context

[liamdebeasi]

Thanks for the feature request! It looks like you can use max-height and max-width to achieve this result.

I created a CodePen here: https://codepen.io/liamdebeasi/pen/wLMvGv

Does this work for your use case? Thanks!

[ctfrancia]

I am away from my computer at the moment. I will follow up with this and let you know.

[ctfrancia]

Hi, @liamdebeasi While that does technically has the desired effect the other problem is working with it natively. Once it reaches the maximum height and you continue type after each new line, once the word is typed and press (space) then the view is scrolled to the top of the ion-textarea and then once you continue typing it will scroll back to the bottom. Meanwhile the button that I have inside will scroll up with the text, hiding the button.

This issue doesn't happen on the desktop, but, only natively.

[liamdebeasi]

Thanks for the follow up! Would you be able to provide a code example of how that would work with the native textarea element?

Thanks!

[ctfrancia]

hi @liamdebeasi Sorry I don't know what you mean exactly. I implemented the max-height as you suggested in the codepen above. The implementation that I was inferring was that of the autoSize module that my application uses currently. currently I am using this autosize feature and while it works I want to try and rely on as little 3rd party modules as possible. currently in my application this is the actual implementation that I am using and it works great natively.

<textarea autosize class="input-message" maxRows="5" [(ngModel)]="message"></textarea>

here is a small Stackblitz with the implementation

[chetanism]

Here is an implementation of a React wrapper component that does the job for me. Anyone facing this problem may try out the solution (or work out something similar in angular):

function TextArea({ maxRows, approxCharsPerRow, onIonChange, ...rest}) {
  const [allowAutoGrow, setAllowAutoGrow] = React.useState(true);

  const handleOnChange = React.useCallback((e) => {
    const newLines = e.target.value.split('').filter(c => c === '\n').length;
    
    setAllowAutoGrow(
      newLines < (maxRows - 2) &&
      e.target.value.length < (approxCharsPerRow * maxRows)
    );
    return onIonChange && onIonChange(e);
  }, [approxCharsPerRow, maxRows, onIonChange]);

  return (
    <IonTextarea
      autoGrow={allowAutoGrow}
      rows={allowAutoGrow ? 1 : maxRows}
      onIonChange={handleOnChange}
      {...rest}
    />
  )
}

[liamdebeasi]

Thanks for the issue. This has been resolved via #21333, and a fix will be available in an upcoming release of Ionic Framework.

Rather than expose a CSS variable for this, we were able to accomplish this via style inheritance. This allows developers to set max/min height and widths on the ion-textarea and have it work properly with autogrow.

Usage Example:

ion-textarea {
  max-height: 300px;
  min-height: 100px;
}

[santekotturi]

I'm running into:

with:

    <ion-textarea
        enterkeyhint="enter"
        inputmode="text"
        [(ngModel)]="messageBody"
        autoGrow="true"
        placeholder="Write a message..."
      ></ion-textarea>

ion-textarea {
    border-radius: 10px;
    min-height: 20px;
    height: auto;
    max-height: 200px;
    --padding-start: 10px;
    --padding-bottom: 10px;
    --padding-top: 10px;
    --padding-end: 50px;
    background-color: var(--ion-color-light);
    color: var(--ion-color-dark);
  }

I've tried adding some styles to overwrite the current framework styles:

textarea, .native-textarea.sc-ion-textarea-ios {
  min-height: 20px !important;
  max-height: 200px !important;
}

.textarea-wrapper,
.native-textarea {
    min-height: 20px !important;
    max-height: 200px !important;
}

but the element height seems to be overriding:

element.style {
    height: 326px;
}

anything else I can try in the meantime? or just wait for the framework update?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.