[iOS 10] Pasting text causes screen to "jump"

[dortzur]

Description
Pasting text while using an iOS 10 device causes the entire screen to "jump" to a random location.

Steps for Reproduction

1. Visit quilljs.com
2. Paste "Bungalo Bob" into the middle of the demo editor.

Expected behavior:
Screen remains focused on the editor

Actual behavior:
Screen "jumps" to a random location.

Platforms:
iOS 10
Reproduced on Safari, iPhone 6+ device.

Version:
Quill.js 1.2.0

[sferoze]

@dortzur try this out as a temp fix...

var Clipboard = Quill.import('modules/clipboard');

class MyClipboard extends Clipboard {
  onPaste(e) {
    var wrapper = document.querySelector('html');
    var scrollTop = wrapper.scrollTop;
    super.onPaste(e);
    setTimeout(function() {
      wrapper.scrollTop = scrollTop;
    }, 1);
  }
}

Quill.register('modules/clipboard', MyClipboard, true);

[sferoze]

Another solution if you can build quill is to comment out scrollIntoView line in method onPaste in file clipboard.js

onPaste(e) {
    if (e.defaultPrevented || !this.quill.isEnabled()) return;
    let range = this.quill.getSelection();
    let delta = new Delta().retain(range.index);
    let scrollTop = this.quill.scrollingContainer.scrollTop;
    this.container.focus();
    setTimeout(() => {
      this.quill.selection.update(Quill.sources.SILENT);
      delta = delta.concat(this.convert()).delete(range.length);
      this.quill.updateContents(delta, Quill.sources.USER);
      // range.length contributes to delta.length()
      this.quill.setSelection(delta.length() - range.length, Quill.sources.SILENT);
      this.quill.scrollingContainer.scrollTop = scrollTop;
      this.quill.selection.scrollIntoView(); // COMMENT OUT THIS LINE
    }, 1);
  }

Not sure about the side effects. I am not sure why Quill even wants to scroll on paste. If you are pasting something into the editor, that means it is already focused, and the scroll position should not change.

[sferoze]

Also @dortzur I found this in the docs. scrollingContainer is an option you can pass in the container with the scrollbars.

scrollingContainer

Default: null

Specifies which container has the scrollbars (i.e. overflow-y: auto), if changed with CSS from the default ql-editor. Necessary to fix scroll jumping bugs when Quill is set to auto grow its height, and another ancestor container is responsible from the scrolling.

[sferoze]

@dortzur check out the quill issue

#1374

In that thread I show a solution to completely stop any scroll jumping on paste. It works pretty well but requires you to edit quill source code...

[jhchen]

Closing in favor of #1374