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(); 
  }

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(); 
  }

• javascript
• angular
• typescript
• ionic-framework

• Have you tried <ion-searchbar (tap)= instead of (click) ? – user1752532 Commented Jun 6, 2017 at 6:44
• @maudulus Could you provide some feedback on the provided answers so that we can possibly adjust and help you better? – maninak Commented Jun 8, 2017 at 22:38

3 Answers 3

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" autoplete="off" autocorrect="off" spellcheck="false" disabled="true">
      </div>
    </div>
  </ion-toolbar>
</ion-header>

Add this function inside the class of your .ts file (best practice is before constructor):

ionViewDidLoad(){
    document.getElementsByClassName('searchbar-input')[0].setAttribute("onFocus", "openSearchModal()");
}

Explanation

The ion-searchbar ionic element creates multiple child elements, one of which is of course an input element which has a class searchbarElement.

We first ask to get all those elements with this class name. This returns an array of such elements, in the first position of which, at index = 0, resides the <input> field of which the functionality we want to change.

We then programmatically set an onFocus attribute that is called when an element gains focus (e.g. when clicked). This in essence makes it look like the following:

<input class="searchbar-input" onFocus="openSearchModal()">

So in the end, when the user clicks on the search box, the modal is called.

We then wrap all of this inside an ionViewDidLoad() which is a lifecycle hook ionic provides that we can use to run code right after the view has loaded.

You can disable child ponent 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;