Ionic trigger modal open function with ion-searchbar focus - click not working

Question

I have an ion-searchbar that, when clicked, opens a modal. However, currently the click process is actually taking two clicks, one to focus, one to open the modal. I have tried to add the click to the ion-toolbar it is contained in, and have tried to disable the ion-searchbar with [disabled]="true", but the disabled functionality isn't available to the ion-searchbar. How can I trigger the new modal to open without having to double click, and in such a way that the focus doesn't happen on the original searchbar?

HTML

<ion-header>
  <ion-toolbar >
    <ion-searchbar (click)="openSearchModal()"></ion-searchbar>
  </ion-toolbar>
</ion-header>

JS

  openSearchModal() {
    let myModal = this.modalCtrl.create(SearchmodalPage); 
    myModal.present(); 
  }

Answer 1

Like you are saying, ion-searchbar doesn't have a disabled functionnality.

But you can create your own searchbar, that will use ionic classes to avoid recoding it and you will be able to disable it.

See my code here :

<ion-header>
   <ion-toolbar>
    <div class="searchbar searchbar-ios searchbar-left-aligned searchbar-active" (click)="openSearchModal()">
      <div class="searchbar-input-container">
        <div class="searchbar-search-icon"></div>
        <input class="searchbar-input" placeholder="Search" type="search" autocomplete="off" autocorrect="off" spellcheck="false" disabled="true">
      </div>
    </div>
  </ion-toolbar>
</ion-header>