In Ionic 5 + Capacitor event.preventDefault() doesn't prevent blur on div contenteditable="true" on iOS device

Ionic Framework ionic-v3
1

Hey there,

In my Ionic 5 + Capacitor project I need in my app to have an ability to put cursor on div contenteditable=“true” and then tap some tool on the toolbar without losing focus from this div.
For testing purposes I’ve got the following simple code for home page:

html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <input class="inp" value="input text">

  <div
    class="dv"
    contenteditable="true"
    autocomplete="on"
    autocorrect="on"
  >div contenteditable text</div>

</ion-content>

<ion-footer>
  <div id="toolbar" (mousedown)="preventBlur($event)" (touchstart)="preventBlur($event)">
    toolbar
  </div>
</ion-footer>

css:

.inp {
  width: 100%;
  border: 5px solid green;
}

.dv {
  user-select: auto;
  height: 100px;
  border: 5px solid blue;
}

ion-footer {
  div {
    height: 100px;
    border: 5px solid red;
  }
}

js:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() { }

  preventBlur(event) {

    console.log('event: ', event);

    event.preventDefault();

    event.stopPropagation();
  }
}

In desktop browser it works fine. Neither input nor div contenteditable=“true” lose their focuses when clicking toolbar div.
BUT on a real iOS device or emulator putting cursor on input and tapping toolbar still keeps focus as need but div contenteditable=“true” loses its focus.
What’s also interesting is that the same code for Ionic 3 + cordova works the opposite way: input loses focus but div doesn’t!

Does anyone have ideas why it happens?

BTW you can download Ionic 5 / 3 projects to replicate the issue from here:

Thanks,
Andrew.