<ion-searchbar> is not working inside <ion-header> Ionic 4

Question

I m working with Ionic 4 and I'm trying to implement a searchbar into the header just like this :

<ion-header>
  <ion-toolbar>
    <!-- Side menu button-->
    <ion-buttons slot="start">

      <button (click)="openFirst()"><img src="../../../assets/jas.png"></button>
    </ion-buttons>

    <ion-title><ion-searchbar ></ion-searchbar></ion-title>
  </ion-toolbar>
</ion-header>

My problem is that the search bar displays but I can't write anything inside.

Also, when it's not inside <ion-title>, it's not working.

It seems that it is working in every other place of the app

Answer 1

Try something like this as follows,

<ion-header>
  <ion-toolbar>
    <ion-title>Enter Place</ion-title> 
    <ion-searchbar [(ngModel)]="autocomplete.query" [showCancelButton]="true" (ionInput)="updateSearch()" (ionCancel)="dismiss()"></ion-searchbar>
    <ion-searchbar [(ngModel)]="autocomplete.query" [showCancelButton]="true" (ionInput)="updateSearch()" (ionCancel)="dismiss()">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>