When keyboard is open in modal dismiss button does not work (Ionic 5)

Question

the problem only happens on iOS devices. I have an ion-textarea inside a modal, and a button inside it that the only action it executes is

dismissModal() { this.modalController.dismiss(); }

The problem is that when I click on it, only the keyboard is hidden and I have to click it again so that it executes the close of the modal. How can I avoid this behavior?

Answer 1

My solution:

In the HTML:

    <ion-button
      (mousedown)="dismissModal(); questionTextarea.setFocus()"
      *ngIf="platform.is('ios')"
    >
      <ion-icon name="close" slot="icon-only"></ion-icon>
    </ion-button>
    <ion-button
      (mousedown)="dismissModal()"
      *ngIf="!platform.is('ios')"
    >
      <ion-icon name="close" slot="icon-only"></ion-icon>
    </ion-button>

in this way only for iOS devices it is forced to not close the keyboard

And in the component.ts:

 dismissModal() {
    if (this.platform.is('ios')) {
      Keyboard.hide();
      this.modalController.dismiss();
    } else {
      this.modalController.dismiss();
    }
  }

in this way, the keyboard closing event will not be executed until the dismiss function is called. I am using the plugin @capacitor/keyboard