CODEWITHSUNDEEP
javascriptangulartypescriptionic-framework
maudulus
maudulus

Reputation: 11035

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

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

Upvotes: 5

Views: 2715

Answers (3)

Danijel Man
Danijel Man

Reputation: 11

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;

Upvotes: 1

maninak
maninak

Reputation: 2726

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.

Upvotes: 1

chatpitau
chatpitau

Reputation: 1303

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>

Upvotes: 3

Related Questions