Ionic Keyboard issue while tap on SearchBar its scroll to top and invisible to user

Question

I am working on Ionic 3.X version and On my Home Page I have one search bar.

Issue : While click on SearchBar its opening Keyboard from bottom and my searchBar and whole screen goes UP side and user unable to view or scroll after click on searchBar

issue in OS : iOS

Same code works in Android

Screen Shots:

HTML Code for Search Bar :

<ion-content padding class="home-content-background-color">
    <div *ngIf="headerTextShowFlag">
      <div text-center>
        <img [src]="appLogo" width="100" height="100">
      </div>
      <ion-label style="text-align: center" class="text-color">Welcome</ion-label>
      <hr class="hr-style">
      <ion-label text-wrap padding style="text-align: center" class="text-color">
        Please Enter Service Request Number</ion-label>
    </div>
    <div>
      <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
      <ion-list style="height: 58%; overflow-y: scroll; margin: 0px">

        <ion-item *ngFor="let Case of CaseArrayFiltered" (click)="selectCaseFromList(Case)">
          {{ Case }}
        </ion-item>

      </ion-list>
    </div>

</ion-content>

Unable to show search bar on top its always moving out of screen at first load while click on search bar at first time.

Disable scroll solve my problem but after adding below line my keyboard show/hide not working properly.

this.keyboard.disableScroll(true);

Possible duplicate of [Ionic 2 Form goes up when keyboard shows](https://stackoverflow.com/questions/41161705/ionic-2-form-goes-up-when-keyboard-shows) — Duannx, Jan 30 '18 at 02:10

score 0 · Accepted Answer · answered Feb 23 '18 at 12:10

After lots of R&D on above issue I found solution with some code patch in my .ts file

Need to disable keyboard scroll so that my screen will not go up automatically while keyboard will show.

platform.ready().then(() => {
    this.keyboard.disableScroll(true);
});

Also need to update my flag in this.zone()

this.zone.run(() => {
    self.toggleHeader = false;
});

Above line of code will execute on main thread and will update flag & UI so based on this my issue was resolved and hope this will helps others who also facing same issue specially in iOS platform.

Thanks.

Ionic Keyboard issue while tap on SearchBar its scroll to top and invisible to user

1 Answers1