Ionic-framework: contenteditable=true not work in ios

[bibitoo]

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

When use contenteditable=true on dom element, iphone 6 could not edit conent;

What behavior are you expecting?

I can edit the element content which has contenteditable=true

Steps to reproduce:

1. write a page contain contenteditable=true element in template.
2. use iphone navigate to this page.
3. touch the element content , could not input.

<ion-navbar *navbar>
  <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    <ion-title>
    {{ "common.edit" | translate }} 
    {{ "demo.example.entity" | translate }} 
    </ion-title>
</ion-navbar>

<div contenteditable="true">
    Our life is<br/>
    no reason.
</div>

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.x or 2.x
2.x

Plunker that shows an example of your issue

For Ionic 1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview

For Ionic 2 issues - http://plnkr.co/edit/L8JN6w5mqwbMY2E14dbk?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)
Your system information:

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS: Distributor ID: Ubuntu Description: Ubuntu 15.10
Node Version: v5.11.0

ios info:
Iphone 6 iOS 9.3.1

[jgw96]

Hello all! Is this still an issue with the latest version of ionic? Thanks!

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[bushev]

Hello, @jgw96!

I faced with the same problem using the latest Ionic on iOS and with ionic serve (on Safari).

global packages:

    @ionic/cli-utils : 1.3.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.3.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.3.0
    @ionic/cli-plugin-ionic-angular : 1.3.0
    Cordova Platforms               : android 6.2.3 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v6.10.3
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : 1.9.1 
    ios-sim    : 5.1.0 

<ion-header>

  <ion-navbar>
    <ion-title>Test contenteditable</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>

    <div contenteditable="true">Edit me</div>

</ion-content>

[rdelhommer]

I am also encountering this issue

Installed Packages

• ionic/cli-plugin-cordova: 1.6.2
• ionic/cli-plugin-gulp: 1.1.1
• ionic/cli-plugin-ionic1: 2.1.1
• ionic: 3.7.0

Seen on:

• Browser - Safari: 10.1.2
• iOS: 10.3.2

EDIT: @bushev Adding the following to my CSS fixed the issue for me. Found here

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

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.