CODEWITHSUNDEEP
ionic-frameworkionic4
phunder
phunder

Reputation: 1713

Trigger ion-input focus when ion-icon clicked

Good day all

I am building my first ionic 4 mobile application, and have a question about how label, icons and other elements can be connected to a form input.

In normal HTML forms you have a relationship between labels and inputs using the "for" attribute, like so:

<label for="name">Please enter name</label>
<input type="text" id="name" name="name"/>

With this relationship in place the input field gains focus when you either click on the label or on the input itself to gain focus on the input.

In ionic you use ion-label and ion-input instead of the default HTML form elements, and these seem to not share this capability.

I am specifically interested in using an icon as the aforementioned label. I tried the following without any success:

<ion-item>
  <ion-label for="searchText">
    <ion-icon name="search"></ion-icon> <!--name here refers to the icon displayed-->
  </ion-label>
  <ion-input id="searchText" name="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>

Is there something similar that one can use, or do I need to use JavaScript to achieve this?

Any advice would be greatly appropriated

Upvotes: 1

Views: 4828

Answers (1)

phunder
phunder

Reputation: 1713

So since I've been asked for a solution by someone else, let me post the workaround that I used:

I never managed to find a way to automatically add this kind of functionality like in a normal form, I did manage to trigger a click event on the icon that then caller a JavaScript function to give focus to my input field. It looks something like this:

HTML: 

<ion-item color="light" class="white-iput" lines="none" (click)="focusSearch()">
  <button (click)="focusSearch()" class="icon-button">
    <ion-icon name="search" color="primary" for="searchText"></ion-icon>
  </button>
  <ion-input #input id="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>

JS (in my Type Sctipr file):

  @ViewChild('input') searchInput: { setFocus: () => void; } ;

  ...

   focusSearch() {
     this.searchInput.setFocus();
   }

Note that I call the "focusSearch()" function if you click anywhere in the "ion-item" wrapped around the icon and the text box, as I use CSS to have the whole thing display as a single textbox.

Hope this helps!

Upvotes: 1

Related Questions