# Can't focus into contenteditable on Android when setting html content

**URL:** <https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704>\
**Category:** ionic-v1\
**Created:** [August 25, 2014, 12:31am UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704 "2014-08-25T00:31:01Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![emertechie](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@emertechie](https://forum.ionicframework.com/u/emertechie)\
**Post date:** [August 25, 2014, 12:31am UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/1 "2014-08-25T00:31:01Z")

</div>

If I set some html content for a contenteditable div then I’m unable to focus into it properly on Android (testing with a Nexus 5). If you try really hard you can occasionally get the caret to show but it’s basically not working.

Following codepen demonstrates the issue: [http://codepen.io/emertechie/pen/mApya](http://codepen.io/emertechie/pen/mApya)

Focus is working fine if I just set plain text with `.text()` and everything works ok on iOS.

I tried setting `overflow-scroll="true"` on the content area to disable the Ionic scroll in case that was the issue, but same problem. I also tested with a vanilla Cordova project and the issue doesn’t occur. So I think it’s something to do with Ionic library.

I’m a bit stumped. Really appreciate any suggestions.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [August 25, 2014, 12:42am UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/2 "2014-08-25T00:42:22Z")

</div>

Can you try this

```auto
*[contenteditable] {
  -webkit-user-select: auto !important;
}

```

---

<div class="post-metadata">

**Author:** ![emertechie](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@emertechie](https://forum.ionicframework.com/u/emertechie)\
**Post date:** [August 25, 2014, 1:24am UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/3 "2014-08-25T01:24:04Z")

</div>

Thanks for suggestion but that didn’t help.

It there’s anything else I can try, let me know. Otherwise should I consider this a bug and log an issue?

(Btw when I inspect the webview via Chrome it shows the calculated property as ‘text’, not ‘auto’ but I’m sure that’s nothing)

![](https://sea1.discourse-cdn.com/ionicframework/uploads/default/3369/c2dd4a2ccbcff46c.png)

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [August 25, 2014, 1:42am UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/4 "2014-08-25T01:42:03Z")

</div>

Try replacing it with `text` instead of auto. I don’t have an android phone on me right now so I can’t do any testing of mine own.

---

<div class="post-metadata">

**Author:** ![emertechie](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@emertechie](https://forum.ionicframework.com/u/emertechie)\
**Post date:** [August 25, 2014, 2:26am UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/5 "2014-08-25T02:26:32Z")

</div>

Yea I tried `text` already and same issue.

I’ve been comparing the css from vanilla cordova project (where focus works) with Ionic one and I can’t spot anything obviously different that would cause an issue.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [August 25, 2014, 2:27am UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/6 "2014-08-25T02:27:59Z")

</div>

> [@emertechie](#):
>
> I’ve been comparing the css from vanilla cordova project (where focus works) with Ionic one and I can’t spot anything obviously different that would cause an issue.

Hmm, alright. When I get to my office in the morning I will test this on my android phone and try to find the issue

---

<div class="post-metadata">

**Author:** ![emertechie](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@emertechie](https://forum.ionicframework.com/u/emertechie)\
**Post date:** [August 25, 2014, 2:40am UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/7 "2014-08-25T02:40:05Z")

</div>

Great, thanks. I’m having a bit of a poke around in the Ionic sources. If I find anything I’ll let you know.

---

<div class="post-metadata">

**Author:** ![emertechie](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@emertechie](https://forum.ionicframework.com/u/emertechie)\
**Post date:** [August 25, 2014, 3:33am UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/8 "2014-08-25T03:33:58Z")

</div>

Ok so I can hack the source to make focus ‘work’ but I’m not sure of underlying cause.

In `tap.js`, in `tapMouseDown(e)` function, `e.target` will refer to a child element under the contenteditable parent (for example, a `<p>`) so the value of the `.contentEditable` property is therefore `inherit` and not `true` so this fails the comparison in `ionic.tap.isTextInput`:

> `ele.contentEditable === 'true'`

If I briefly change that to test for inherit also (obviously not a solution), then the focus works on Android.

Setting a few breakpoints in Android vs iOS, it _seems_ that maybe the order of calls to functions like `tapMouseDown`, `tapFocusIn` and `keyboardBrowserFocusIn` is different between the platforms?

Anyway I’m just fumbling around in the dark really. I’m not sure how it all works! I’ll leave it to you to have a look. Thanks

**Update** : I noticed that in another place in same file, the `isContentEditable` property is used. This returns true for the child element so that could be the solution.

---

<div class="post-metadata">

**Author:** ![emertechie](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@emertechie](https://forum.ionicframework.com/u/emertechie)\
**Post date:** [August 27, 2014, 6:47am UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/9 "2014-08-27T06:47:32Z")

</div>

@mhartington Did you get a chance to look at this? If you see my update, I think the solution could be to just use the `isContentEditable` property

Let me know if you want me to open an issue for this. Afraid of it getting lost here

Thanks

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [August 27, 2014, 2:52pm UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/10 "2014-08-27T14:52:30Z")

</div>

Hey looking at it right now. Any particular version that you had trouble with? Just tried 4.4 and it all works fine for me.

Edit:

4.1, .4.2, 4.3 working fine as well with out any modifications

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [August 27, 2014, 3:12pm UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/11 "2014-08-27T15:12:44Z")

</div>

Update, soo I reread the post…totally missed the part where you said that the content of the content-editable div were `<p>, <em>, <h2>,`etc.

Soo with that being said…I’ll look into tap.js a bit more, but any particular reason why you’re using content-editable?

---

<div class="post-metadata">

**Author:** ![emertechie](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@emertechie](https://forum.ionicframework.com/u/emertechie)\
**Post date:** [August 27, 2014, 3:14pm UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/12 "2014-08-27T15:14:17Z")

</div>

Yea I was testing with 4.4.4 on a Nexus 5. I definitely have issues focusing into top element from codepen earlier. And exact same issues in app (have to use a custom Ionic build to make it usable)

What devices are you using? Are you using nightlies or the beta 11 also?

(btw probably won’t be able to reply until the morning - on Asia time here)

---

<div class="post-metadata">

**Author:** ![emertechie](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@emertechie](https://forum.ionicframework.com/u/emertechie)\
**Post date:** [August 27, 2014, 3:19pm UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/13 "2014-08-27T15:19:58Z")

</div>

Just saw your last post. Any reason I shouldn’t be using it? 😄

I’m writing a journalling app and I want it to support basic rich text editing like bold and italics. And apart from that, contenteditables are a much better fit because I want to lay things out in an ‘outliner’ (bullet-point list) style.

I do seem to be bumping into a few issues related to contenteditables so I guess it hasn’t got much use before. If you’re in the mood, couple of other issues I logged related to them:

[https://github.com/driftyco/ionic/issues/1897](https://github.com/driftyco/ionic/issues/1897) (PR pending)  
[https://github.com/driftyco/ionic/issues/2091](https://github.com/driftyco/ionic/issues/2091)

thanks

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [August 27, 2014, 8:06pm UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/14 "2014-08-27T20:06:44Z")

</div>

So talked with the dev about content-editable divs,

Soo right now there not really something we would suggest.

They can be problematic and we haven’t really tested them with ionic.  
Instead we suggest using textarea’s instead. Since there are issues open with examples/codepens, we will get to it. Just takes some time.

But if you need a rich text-editor, you could try text-angular

“[http://codepen.io/mhartington/pen/JCaqr](http://codepen.io/mhartington/pen/JCaqr)”

---

<div class="post-metadata">

**Author:** ![emertechie](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@emertechie](https://forum.ionicframework.com/u/emertechie)\
**Post date:** [August 28, 2014, 1:37am UTC](https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704/15 "2014-08-28T01:37:48Z")

</div>

Hmm, ok. Have put a good bit of effort into the contenteditable approach and fixing bugs along the way, so not the answer I was hoping for 😄

A full blown editor is overkill for what I need, which is something similar to [Workflowy](https://workflowy.com/) ([video](http://blog.workflowy.com/2014/08/05/improvement-navigate-up-and-down-within-a-multi-line-item/)).

But ok, realise that contenteditables may not be top priority. Hope you can get to those issues eventually though. For now I guess I’ll have to try textareas.
