0

I have a part of my app that's a chat application where any time I hit the "submit" button, the textarea loses input and the virtual keyboard closes. I tried remedying this by re-focusing the textarea as soon as the form is submitted. The problem is that this works fine when I work with Ionic in the browser, but as soon as I test it on my iOS device, it refuses to refocus on the textarea. Here is the code in my HTML Template:

<div class="create-message-block">
    <form [formGroup]="addMessageForm" novalidate (ngSubmit)="addMessage(addMessageForm.value, focusableTextarea)">
      <textarea #focusableTextarea [formControl]="addMessageForm.get('message')" placeholder="Write your message..."></textarea>
      <input type="submit" value="Send"/>
    </form>
  </div>

// And here is the add message functionality in my component
addMessage(data, focusableTextarea) {
 // ... a lot of code edited out for sample purposes

  focusableTextarea.focus()
}

Does anyone know if there's anything else I can? I've even tried adding a slight timeout where the .focus() waits 50ms before it fires. That didn't do anything either.

Thanks in advance!

Stevie Star
  • 2,141
  • 1
  • 25
  • 44

1 Answers1

-1

What I did in my chat app is use the mousedown event.

(mousedown)="preventFocusChange($event)"

And in the function

preventFocusChange(e) {
    e.preventDefault();
}

Let me know if this works for you.

Saksham Gupta
  • 600
  • 5
  • 13