Ion trigger modal discovery function with ion search focus - click don't work

Question

I have an ion-searchbar that opens when modal opens. However, currently the click process actually performs two clicks, one for focusing, one for opening a modal. I tried to add a click to the ion-toolbar that it contains, and tried to disable ion-searchbar using [disabled]="true" , but the disabled function is not available for ion-searchbar . How can I launch a new modal mode without opening a double click and so that focus does not occur on the original search bar?

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

As you say, ion-searchbar does not have a function disabled.

But you can create your own search bar, which will use ion classes to avoid its conversion, and you can turn it off.

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> 

Answer 2

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

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

Description

The ion element ion-searchbar creates several children, one of which, of course, is the input element, which has the class searchbarElement .

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

Then we programmatically set the onFocus attribute, which is called when the element receives focus (for example, when pressed). This essentially does it as follows:

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

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

Then we wrap it all up inside ionViewDidLoad() , which provides a lifecycle cache loop binding that we can use to run the code right after the view has loaded.