Contenteditable on side menu does not work

It seems that contenteditable is not working if I’m using side-menu. Here’s a sample code:

<ion-side-menus>
<ion-side-menu-content>

    <div contenteditable="true">hello</div>
</ion-side-menu-content>

<ion-side-menu side="left">
</ion-side-menu>
</ion-side-menus>

It looks like there are some gestures that are preventing contenteditable to work.

I was able to make it work here : http://codepen.io/calendee/pen/FszDc

Thank you very much for your reply.

Actually the problem only happens inside the content (not the menu). I tried to edit your codepen to add a <div contenteditable="true"> inside <ion-content> and it doesn’t work. I cannot edit anything inside the div

Ahhh… I see.

I’ve re-opened Issue # 421 with an explanation of how it only works AFTER you change browser tab.

Thanks @Calendee! I’ll keep track of that issue

I encountered the same issue on beta4, but found a workaround for our project:

In your HTML view:

<ion-side-menu-content>
      <div contenteditable="true" ng-click="focus($event)">Something</div>
</ion-side-menu-content>

In your controller:

$scope.focus = function (e) {
    var selection = window.getSelection();
    var range = document.createRange();
    var element = e.srcElement;
    range.setStart(element, 0);
    range.setEnd(element, 0);
    selection.removeAllRanges();
    selection.addRange(range);
};

The basic idea is to force the cursor into the content area by handling the click event on the editable DIV and setting tis selection range. Hopefully this helps until the developers fix the real problem.

Hi,

how do i set the courser at the last position of the text? Every new click event set it to the first position of the div-element.

…hope this bug will be fixed soon. So we can use contenteditable & sidemenus. :slight_smile:

regards
mav

thanks a lot ,@hanthomas,but when i press Enter, the text in the newline can’t be selected, could you tell me what’s wrong with that??

Hey, the contenteditable does not react to clicks on Safari on OSX. Would be nice to get it to work on Safari as well.

http://codepen.io/calendee/pen/FszDc works on Chrome 41.0.2272.101 but not on Safari 8.0.4.

I have similar issue with contenteditable div not properly working in ios ionic
anyone have any solution