bug: Cannot set caret in contenteditable child elements

[jgw96]

From @jhdrn on April 17, 2015 8:26

Type: bug

Platform: all

When using contenteditable="true" on an element, it is impossible to set the caret inside child elements. If the child is a text node, it works though.

This bug makes rich text editors unusable :/

It worked for us in rc0 but not in rc3.

Se example http://codepen.io/anon/pen/rVBOMv

Copied from original issue: driftyco/ionic#3542

[jgw96]

From @kmturley on September 23, 2015 18:4

I'm getting this issue on iOS device emulator using my Rich Text Editor: http://kmturley.github.io/angular-sir-trevor/ionic-src/www/

The issue doesn't occur when only angular is used: http://kmturley.github.io/angular-sir-trevor/

So it must be an ionic issue

[jgw96]

Hello! Are you guys still experiencing this issue with the latest version of ionic (ionic 1.2.4)? Thanks!

[jgw96]

From @kmturley on April 13, 2016 19:17

@jgw96 nope, looks worse than before, the caret doesn't even appear in nested elements: http://codepen.io/anon/pen/xVWdPP

Versus the previous version: http://codepen.io/anon/pen/rVBOMv

[jgw96]

From @johannds on April 22, 2016 8:27

This is a issue for me as well. It looks like clicking is also not functioning as it should. The caret position seems to be set randomly within the element. Is there a definitive answer on whether contentEditable officially works with Ionic?

[jgw96]

@johannds @kmturley does this issue only happen on mobile for you all?

[jgw96]

From @kmturley on April 22, 2016 16:9

@jgw96 Nope you can replicate in Chrome (latest) using the links above

[jgw96]

@kmturley and this does not happen with just a plain angular project?

[jgw96]

From @kmturley on April 22, 2016 16:54

@jgw96 yes if you compare my two examples with Angular vs Ionic: http://kmturley.github.io/angular-sir-trevor/src/ http://kmturley.github.io/angular-sir-trevor/ionic-src/www/

Using Chrome, Inspect and emulate as a mobile device, one works, the other doesn't

[jgw96]

From @MayankLogiciel on June 24, 2016 8:4

Codepen with similar issue : http://codepen.io/anon/pen/rVBOMv

I am facing similar issue with ionic. Earlier i thought it is due to ionic-scroll or ion-content issue then i made a simple div contenteditable without ionic-scroll/ion-content with only text in it as below

<div contenteditable="true">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>

When i edit this text and hit enter, it generates nested div structure without contenteditable and the second portion of text i.e the text inside nested div is now not editable anymore

Below is the html structure gets generated after hitting enter anywhere in the Lorem Ipsum text.

<div contenteditable="true">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in th
    <div>
        e 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
    </div>
</div>

With further experiments i found contenteditable doesn't work with nested html tags structure with ionic. I have tried nested html structure with different html tags (span, p, div, br, i, u) and it didn't work with anyone.

if i dynamically add contenteditable attribute to all tags then nested tags started working as editable. But when cursor/caret is already inside contenteditable div and i click on any other contenteditable block or tag, iOS keyboard first hide and then reapprear always not giving a good user experience. Can anyone help me with these issues?

I have tested these on iPad Air 2 (9.3.2)

ionic info

Cordova CLI: 5.0.0 Gulp version: CLI version 3.9.0 Gulp local: Local version 3.9.0 Ionic Version: 1.1.1 Ionic CLI Version: 1.7.7 Ionic App Lib Version: 0.6.3 ios-deploy version: Not installed ios-sim version: 3.0.0 OS: Mac OS X El Capitan Node Version: v0.12.7 Xcode version: Xcode 7.3 Build version 7D175

[jgw96]

From @q769073309 on September 28, 2016 3:46

it is fixed in my project after changed some code like this in ionic.js: ` if (ele && ((/^(input|textarea|select)$/i).test(ele.tagName) || ele.isContentEditable ||ele.parentNode.isContentEditable )) {

}`

but how about ele.parentNode.parentNode ...？

[ghost]

Yeah, as far as I can see, only on mobile.