bug: contenteditable not selectable or editable in iOS

Bug Report

Ionic version:

[x] 4.x

Current behavior: A <div contenteditable="true"> can’t be edited in iOS mobile view when inside <ion-app>. Tapping on the div does not make the editor caret appear.

Expected behavior: Be selectable/editable. Can edit contenteditable within ion-app for Android and browser, but not iOS mobile.

Steps to reproduce:

1. ionic start ion-app-contenteditable-ios blank --capacitor
2. edit app.component.html

<div contenteditable="true" style="height: 100px; background: teal">Editable, outside ion-app</div>
<ion-app style="margin-top: 100px;">
  <div contenteditable="true" style="height: 100px; background: tomato">Editable, inside ion-app</div>
</ion-app>

1. ionic build
2. npx cap add ios
3. npx cap open ios

Test in simulator.

Related code: Repo with above example: https://github.com/CFT-Chris/ion-app-contenteditable-ios

Other information: This is the same as #6336 and it still reproduces now. I can confirm adding the CSS is a sufficient workaround:

[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\Chris\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.4.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.25
   @capacitor/core           : 1.0.0-beta.25

[CFT-Chris]

Hi @peterpeterparker,

I also reproduce what you are seeing (child elements of contenteditables div are immediately blurred trying to select text within them).

Would disabling inputBlurring be too big of a change and impact things outside of contenteditable divs? Perhaps there is a way to disable inputBlurring for contenteditables only?

I’m eyeing this line in particular in inputBlurring: const SKIP_SELECTOR = 'input, textarea, [no-blur]';

Maybe we could add [contenteditable] to that list. I can confirm that if we add the no-blur attribute to our contenteditable divs the bug you describe no longer reproduces.

Also regarding your comment:

I’m not exactly facing the same behavior. Yes user-select: text; has to be set but it works in my case the same if I set it on the ion-app or the editable div (for example).

I think the user-select: text always needs to be applied at the [contenteditable] level and not the ion-app level, per the proposed PR fix. Otherwise, all contents end up being selectable, which I would assume is the undesired behaviour the original app.scss style was trying to fix given the amount of accidental touch holds, swiping and scrolling on mobile platforms.

[peterpeterparker]

I’ve cloned and build locally Ionic core and track down the issue in ion-app. I figured out that inputShims, which is only imported on iOS, is the root cause of the problem. Commenting the import and the above problem doesn’t happens anymore.

Why is another question but that’s a start.

Update: in the script, there is an option inputBlurring which per default is true. turning it to false solves the problem

const inputBlurring = config.getBoolean('inputBlurring', true);

p.s.: in case of Ionic core, you could disable this blurring function like the following:

import '@ionic/core';

import {setupConfig} from '@ionic/core';
setupConfig({
    inputBlurring: false
});