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

user_3216297 0
Viewed 2148

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(); 
  }
ionic-framework angular typescript javascript
3 Answers

You can disable child component of the . In fact, this ionic tag is working with input dom. So if you set disable attribute to 'true' will be disabled.

HTML

<ion-searchbar id="searchBar"></ion-searchbar>

ts

let ionSearchBarInputBox = document.getElementById("searchBar").getElementsByTagName("INPUT");
ionSearchBarInputBox[0].disabled=true;
user_98573500
Related