Draft-js: Focus / selection issues on mobile

[robertgonzales]

I copied the rich text example. Works great on desktop but I have these issues on mobile (iOS safari):

• Focusing seems to blur then refocus the editor. This is noticeable because iOS safari attempts to scroll with every tap on the editor.
• Focusing always loads the last cursor position, no matter where the tap. The only way I've been able to change the position is by long press.

My implementation has the editor as a child of a scrolling div that is absolutely positioned. This seemed like the likely culprit but clearing these styles didn't seem to change anything.

Not sure what the underlying issue is but I hope I'm just missing something obvious.

[hellendag]

It's been a while since I last invested time in making things work smoothly on iOS. :)

For now, I'd call iOS only somewhat supported. As far as I'm aware, we do not currently have any Draft use cases on the production Facebook mobile site. I'm very open to contributions that can help improve the mobile experience -- it's a support gap I'm not thrilled about.

Would you mind taking screen captures of the issues in question here? It will help to see them in action. Thanks!

[apuntovanini]

@robertgonzales I had same issues with FastClick and Draft-js together, if you're using it remember to put the needsclickclass to the editor wrapper and to buttons managing styles.

[robertgonzales]

@apuntovanini thanks! Fastclick was the issue. Though for some reason adding the needsclick class isn't fixing it for me. Would you mind sharing a code snippet of where you added the class?

[apuntovanini]

@robertgonzales I tried adding the class to wrapper and style buttons with no success, since I reckon Drafts has no alternatives, I abandoned Fastclick :) If you find out solutions let me know! thanks a lot

[fredrikolovsson]

Focusing always loads the last cursor position, no matter where the tap.

I had the same issue when testing a simple editor in device mode (iPad, iPhone, Nexus) in Chrome on OSX. For some reason, when trying an editor with rich style controls, it was not possible to focus it at all. Below are code snippets and links to screencasts of the issue (cc @hellendag).

As @apuntovanini suggested, the issue is solved by removing FastClick, but it would have been great if Draft.js and FastClick could work together. (Before removing FastClick altogether, I also tried adding needsclick to the onClick element, but it had no effect.)

First screencast

// with FastClick, focusing always loads the last cursor position, no matter where the tap

// higher-level component
class TitleEditor extends Component {
  // ...
  constructor(props) {
    super(props);
    this.handleFocus = () => this.refs.editor.focus();
    // ...
  }
  // ...
  render() {
    // ...
    log('render');
    return (
      <h1
        className={titleClassNames}
        onClick={this.handleFocus}>
        <Editor
          ref="editor"
          editorState={this.state.editorState}
          onChange={this.handleChange}
        />
      </h1>
    );
  }
}

Second screencast

// with FastClick, nothing happens on click, it is not even focusing on the last position

// higher-level component
class RichTextEditor extends Component {
  // ...
  constructor(props) {
    super(props);
    this.handlefocus = () => this.refs.editor.focus();
    // ... 
  }
  // ...
  render() {
    // ...
    log('render');
    return (
      <div className="ui segment">
        <BlockStyleControls
          editorState={editorState}
          onToggle={this.handleToggleBlockType}
        />
        <InlineStyleControls
          editorState={editorState}
          onToggle={this.handleToggleInlineStyle}
        />
        <div className={className} onClick={this.handleFocus}>
          <Editor
            blockStyleFn={getBlockStyle}
            editorState={editorState}
            readOnly={!editable}
            handleKeyCommand={this.handleKeyCommand} // eslint-disable-line react/jsx-handler-names
            onChange={this.handleChange}
            ref="editor"
            spellCheck
          />
        </div>
      </div>
    );
  }
}

Have you got any ideas how this could be resolved? I will report the issue to FastClick too, would've been awesome if you could work it out together 😄 Thanks!

EDIT: I updated the screencast links so they can be streamed instead of requiring download.

[fredrikolovsson]

@hellendag, any chance you could take a look at the screencasts and let us know if there's a way we can help resolve this?

[Radivarig]

Selection does not work for me on cordova ios that uses safari. I've managed to focus the contenteditable div with the following:

    const contenteditable = document.querySelectorAll("[contenteditable]")[0]
    const editorNode = ReactDOM.findDOMNode(this.editor) // ref

    // fix for fastclick consuming the click event
    if (editorNode.className.indexOf("needsclick") == -1)
      editorNode.className += " needsclick "

    // fix for safari contenteditable user-select: none by default
    contenteditable.style.webkitUserSelect = "text"

    // fix for empty innerHTML of contenteditable
    contenteditable.innerHTML = "_" + contenteditable.innerHTML

    // calling standard .focus of editor ref
    this.editor.focus()

    // getting rid of inserted character
    contenteditable.innerHTML = contenteditable.innerHTML.substring(1)

I am able to insert characters but cannot delete or use any rich text from draft.

Selection range for node of contenteditable does not exist. That is why inserting the character before calling focus has something to insert it at, but the selection seems to not be at correct place regardless of new input text that can be added.
String contenteditable.innerHTML is filled by draft-js html, maybe there is more deeply nested -webkit-user-select: 'text' needed?

[Radivarig]

Yep, the problem is in -webkit-user-select which is none by default in safari.
I've got the focus working by applying -webkit-user-select: text to all child nodes of the editor with just this css:

.DraftEditor-root * {
    -webkit-user-select: text;
}

Also, fastclick works without disabling with needsclick

[flarnie]

Just to update - we don't have full support for mobile web browsers, and I would expect some bugs to show up with ios/android. There are inconsistencies with the events which fire when users type into a mobile browsers, depending on the browser/OS version and the keyboard installed on their device. Sorry that we don't have any fixes for this right now - just updating this to document the lack of support for mobile web.