Ionic 6 issue with ion-modal and ion-text area scroll down while keyboard is open

pritiGamot · August 13, 2022, 5:26am

I am using ion-modal in that we are using ion-textarea so when we focus on ion-textarea and keyboard is opened there is automatically scroll is going to up but idealy it should not do like this it should focus or scroll should be fixed on ion-textarea only
Please help critically issue

FR Billing

Billing Services:

Services Requested/Provided:

{{ service.service?.code }} - {{ service.service?.description }}

Quantity:

Completion Code:

Time Spent:

<ion-row>
  <ion-col>
    <div class="info-heading">Additional Information:</div>
  </ion-col>
</ion-row>
<ion-row class="margintop">
  <ion-col>
    <div class="mt-1">
      <ion-label class="additional-label">High Risk Notification</ion-label>
      <ion-checkbox
        class="checkbox"
        mode="md"
        [checked]="selectedOrder.data.hrn"
        (ionChange)="updateRiskNotification($event)"
      ></ion-checkbox>
    </div>
  </ion-col>
  <ion-col>
    <div class="mt-1">
      <ion-label class="additional-label">OneXperience Survey</ion-label>
      <ion-checkbox
        mode="md"
        class="checkbox"
        [checked]="selectedOrder.data.oneXperience"
        (ionChange)="updateXperienceSurvey($event)"
      ></ion-checkbox>
    </div>
  </ion-col>
</ion-row>
<ion-row class="mt-2">
  <ion-col [size]="6">
    <div class="mt-1 accHr-flex">
      <ion-label class="mb">Accelerated Hours:</ion-label>
      <app-ion-picker
        *ngIf="selectedOrder.isAccl"
        [ngClass]="selectedOrder.isAccl ? 'accelerateHour' : ''"
        [serviceType]="'Accelerated Hours'"
        [arrayList]="timeSpentArray"
        [service]="selectedOrder?.data.billings.acceleratedHours"
        (onChange)="updateAcceleratedHours($event)"
      ></app-ion-picker>
    </div>
  </ion-col>
  <ion-col [size]="6">
    <div class="mt-1">
      <ion-label class="additional-label">ISO Zone:</ion-label>
      <div class="row2 input-field5">{{ selectedOrder?.data.isoZone }}</div>
    </div>
  </ion-col>
</ion-row>
<ion-row class="mt-2 service-padding">
  <div class="billing-comment">FR Billing Comments</div>
</ion-row>
<ion-row class="mt-1 service-padding">
  <ion-textarea
    class="textarea margintop"
    value="{{ billingComment[0].comment }}"
    rows="4"
    (ionChange)="updateComments($event)"
    (ionFocus)="setTextCursor($event)"
    #commentTextArea
  ></ion-textarea>
</ion-row>

Cancel Save

import { Component, Input, OnInit, ViewChild } from ‘@angular/core’;
import { Platform, ModalController } from ‘@ionic/angular’;
import { Constants } from ‘…/…/services/util-service/constants’;
import { SurveyOrder } from ‘…/…/…/models/index’;
import { OrderDataBillingCommentModel } from ‘…/…/models/order/order-data-billing-comment.model’;
import { OrderDataBillingServiceModel } from ‘…/…/models/order/order-data-billing-service.model’;
import { IonTextarea } from ‘@ionic/angular’;
@Component({
selector: ‘app-billing-modal’,
templateUrl: ‘./billing-modal.component.html’,
styleUrls: [‘./billing-modal.component.scss’],
})
export class BillingModalComponent implements OnInit {
@Input() selectedOrder: SurveyOrder;
@ViewChild(‘commentTextArea’) commentTextArea: IonTextarea;
quantityList: number;
completionCodeList: string;
timeSpentArray: number;
totalTimeSpent: number = 0;
quantityHasValue: boolean = false;
codeHasValue: boolean = false;
timeHasValue: boolean = false;
hoursHasValue: boolean = false;
services: string;
isHrn: boolean = false;
comments: string;
completionCode: string;
isOneXperience: boolean = false;
acceleratedHours: number = 0;
billingServiceModel: Array = ;
billingComment: Array = ;
constructor(private platform: Platform, private modalController: ModalController) {}
ngOnInit() {
this.quantityList = Array.from({ length: 100 }, (v, k) => k + 1);
this.completionCodeList = Constants.completionCode;
this.timeSpentArray = Array.from([0, 0.25, 0.5], (x) => x + 0.25).concat(this.quantityList);
this.initializeBillingService();
this.initializeBillingComment();
}

/**

initializeBillingService() initializes services from SelectedOrder
@param {void}
@return {Array}
*/
initializeBillingService() {
this.billingServiceModel = this.selectedOrder.data[‘billings’].serviceBillings.map((service) => {
this.totalTimeSpent += service.timeSpent;
return { …service };
});
}

/**

initializeBillingComment() initializes Billing Model
@param {void}
@return {Array}
*/
initializeBillingComment() {
this.billingComment = this.selectedOrder.data[‘billings’].billingComments.map((comment) => {
return { …comment };
});
}
async setTextCursor(event) {
this.commentTextArea.autoGrow = true;

let inputEle = await this.commentTextArea.getInputElement();
inputEle.setSelectionRange(this.billingComment[0].comment.length, this.billingComment[0].comment.length);

}

/**

updateQuantity() updates quantity entered by FR in billing modal
@param {service,option}
@return {void}
*/
updateQuantity(service: OrderDataBillingServiceModel, option) {
this.quantityHasValue = true;
service.quantity = option.toString();
}

/**

updateTimeSpent() assignes updated timeSpent value entered by FR in billing modal
@param {service,option}
@return {void}
*/
updateTimeSpent(service: OrderDataBillingServiceModel, option) {
this.totalTimeSpent = 0;
this.timeHasValue = true;
this.billingServiceModel.map((billing) => {
if (billing.id === service.id) {
service.timeSpent = option;
}
this.totalTimeSpent += billing.timeSpent;
});
}

/**

updateCompletionCode() assignes statusId and status value entered by FR in billing modal
@param {service,option}
@return {void}
*/
updateCompletionCode(service: OrderDataBillingServiceModel, option) {
this.completionCode = option.detail.value;
this.codeHasValue = true;
service.statusId = option.detail.value.slice(0, 2);
service.status = option.detail.value.slice(5);
}

/**

updateAcceleratedHours() assignes updated acceleratedHours value entered by FR in billing modal
@param {accHours}
@return {void}
*/
updateAcceleratedHours(option) {
this.hoursHasValue = true;
this.acceleratedHours = option;
}

/**

updateRiskNotification() updates hrn value as boolean entered by FR in billing modal
@param {event}
@return {void}
*/
updateRiskNotification(event) {
if (event.detail.checked) this.isHrn = event.detail.checked;
}

/**

updateXperienceSurvey() updates oneXperience value as boolean entered by FR in billing modal
@param {event}
@return {void}
*/
updateXperienceSurvey(event) {
if (event.detail.checked) this.isOneXperience = event.detail.checked;
}

/**

updateComments() updates billing comments entered by FR in billing modal
@param {comments}
@return {void}
*/
updateComments(comments) {
this.billingComment[0].comment = comments.detail.value;
}

indexTracker(index: number, billingService: any) {
return billingService.id;
}

/**

validateButton() checks if required fields has value if it has, return true
@param {}
@return {boolean}
*/
validateButton(): boolean {
this.billingServiceModel.map((billing) => {
if (billing.quantity != 1 && billing.timeSpent != 0 && billing.status != null && billing.statusId != ‘0’) {
this.quantityHasValue = true;
this.timeHasValue = true;
this.codeHasValue = true;
} else {
this.quantityHasValue = false;
this.timeHasValue = false;
this.codeHasValue = false;
}
});
if (this.selectedOrder.isAccl) {
if (this.quantityHasValue && this.codeHasValue && this.timeHasValue && this.hoursHasValue) return false;
} else if (this.quantityHasValue && this.codeHasValue && this.timeHasValue) {
return false;
} else {
return true;
}
}

/* saveChanges() assigns updated field values in billing model

And pass to save() function of orderService
To save updated data to amplify
*/
async saveChanges() {
return await this.modalController.dismiss(
{
acceleratedHours: this.acceleratedHours,
billingComments: this.billingComment,
hrn: this.isHrn,
oneXperience: this.isOneXperience,
serviceBillings: this.billingServiceModel,
},
‘applyChanges’
);
}

public async cancelModal() {
const popover = await this.modalController.getTop();
if (popover) await this.modalController.dismiss();
}
}