Ion-input "clearInput" button click handler


#1

I am trying to put the focus back on the input field which contains a clear button using clearInput attribute.

This is the HTML structure and function in component -

<form (ngSubmit)="sendMessage()">
  <ion-item>
    <ion-input #messageInput 
      placeholder="Type your message" 
      name="inputMessage" 
      on-return="sendMessage(); closeKeyboard()" 
      (click)="setFocusOnInput()" 
      clearInput>
    </ion-input>
  </ion-item>
</form>

@ViewChild("messageInput") public messageInput;
setFocusOnInput(){
    this.messageInput.setFocus();  // Keep the focus on input field.
}

Is there a way to call the setFocusOnInput() on click of the clear button or this will require custom scripts?

Also, I can’t add click listener on form tag as it contains other elements and I don’t need auto-focus functionality when clicked on those elements.