contenteditable div not work with scrollable content

[xuyuanme]

I tried to use ionic to implement an editable html notepad like iPhone's build-in "Notes" app. The following code works fine on Windows Chrome, but having issue on iPhone(iOS 6 and 7) Safari/Chrome:

<content has-header="true" has-footer="true" scroll="true">
    <div contenteditable="true"
         style="-webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto;">
        <div>1. some note that should be editable</div>
        <div>2. some note that should be editable</div>
        <div>3. some note that should be editable</div>
        <div>4. some note that should be editable</div>
        <div>5. some note that should be editable</div>
    </div>
</content>

On iPhone the contenteditable div is very hard to be clicked to edit (it seems only a small area of the first note is responding). Setting scroll="false" will resolve this issue. [Edit]: Actually setting overflow-scroll="true" resolves the issue.

Here's an online example of the issue: https://notegg.com/uitest

[xuyuanme]

The issue is with the following code in ionic.js:

      container.addEventListener("touchstart", function(e) {
        // Don't react if initial down happens on a form element
        if (e.target.tagName.match(/input|textarea|select/i)) {
          return;
        }

        self.doTouchStart(e.touches, e.timeStamp);
        e.preventDefault();
      }, false);

It does not recognize a "tap" on the div. Instead, e.preventDefault() get called in "touchstart" event. Maybe remember the tap action and re-trigger it again after touchend event will help?

Another similar issue is, for multi-line textarea inside the content area, only first tap works.

[mlynch]

Thanks for the data, that really helps! We'll take a look at it.

[mlegenhausen]

+1

[yeradis]

this is affecting the scroll on form views

[calendee]

@ajoslin Can you re-open this please?

Forum : http://forum.ionicframework.com/t/contenteditable-on-side-menu-does-not-work/3195

Working Sample : contenteditable works properly with no side-menu : http://codepen.io/calendee/pen/jeLoA/

Good / Bad Sample : http://codepen.io/calendee/pen/nuHph : contenteditable works properly INSIDE the side-menu. Open the side menu and edit the "Edit Me!" section. It works properly. Now, try to edit the "Edit This In The Main Content" section. It cannot be edited. NOW : Switch to another browser tab. Then go back to this sample. The contenteditable div has the cursor and can be edited.

[ajoslin]

@calendee Could you test this again with beta2 and the recent scroll changes?

I don't understand the codepen you posted.

[calendee]

Still not working Andy on nightly or beta2.

Open the CodePen. Welcome page shows "EDIT THIS SECTION!!!!" Try to edit it. No dice. It should be editable.

If you open the menu, you will see "Edit Me!" as a list item. You can edit it like a fiend.

[adamdbradley]

@ajoslin I'll look into this one since it's related to all the tap/scroll stuff.

[yankustefan]

Hi

Its seems that for ionic-v1.0.0-beta.9 the issue is still persisting.

Also the issue described here:
http://forum.ionicframework.com/t/contenteditable-div-disappears-while-loosing-focus/4201/4
and:
#1897

[ionitron-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.