Quill: When I set the toolbar to a fixed position, the editor gets the focus to scroll to the top

[mengdu]

I need to do full screen processing for the editor, so the editor is highly automatic and the toolbar is fixed;But there's a problem with the fixed positioning toolbar, and every time you set the format editor to go back to the top, how do you solve this problem?

I checked the information, this is the editable div issue, but the editable div will automatically return to the top after the focus, but I still haven't solved it by restoring the cursor position.

examples:

html:*

<div class="quill-editor">
  <div id="editor-container"></div>
</div>

css:

.quill-editor{
    margin: 0 auto;
    width: 880px;
    min-height: 500px;
    margin-top: 100px;
  }
  .quill-editor .ql-editor{
    /*max-height: 400px;*/
  }
  .quill-editor .ql-toolbar.ql-snow,
  .quill-editor .ql-container.ql-snow{
    border: none;
  }
  .quill-editor .ql-toolbar{
    position: fixed;
    z-index: 100;
    background: #ccc;
    top: 0;
  }

js:

var quill = new Quill('#editor-container', {
    debug: 'warn',
    modules: {
      formula: true,
      syntax: true,
        'history': {          // Enable with custom configurations
        'delay': 2500,
        'userOnly': true
      },
      toolbar: toolbarOptions,
    },
    placeholder: 'write here...',
    // bounds: '#editor-container',
    theme: 'snow' //bubble / snow
  });

[LinusMelb]

I had the same issue...

[jhchen]

When I paste the code into the Quill playground (except toolbarOptions is replaced with a ['bold', 'italic'] I cannot reproduce the issue. Can you provide steps for reproduction and specify the browser and OS you are using?

[mengdu]

sorry , I forgot to give the configuration.
this is toolbarOptions:

var toolbarOptions = [
    // [{ 'font': fonts }],
    // [{ 'header': 1 }, { 'header': 2 }],
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'size': ['small', false, 'large', 'huge'] }],
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    // [{ 'script': 'sub'}, { 'script': 'super' }],
    // [{ 'indent': '-1'}, { 'indent': '+1' }],
    // [{ 'direction': 'rtl' }],


    [{ 'color': [] }, { 'background': [] }],

    // [{align: []}],
    // [{ 'align': [false, 'right', 'center', 'justify'] }],
    [{align: ''}, {align: 'right'}, {align: 'center'}, {align: 'justify'}],
    ['image', 'video'],
    ['clean'],                                         // remove formatting button
    ['fullscreen']
  ];

Problems occurred in size, color and background drop-down box.

[jhchen]

I'll repeat: Can you provide steps for reproduction and specify the browser and OS you are using?

[mengdu]

Sorry, it's my oversight.

I created an example: example

Screenshots:

The problem is that when the content is more than one page, when I set the format, I automatically scroll to the top;

I have the same problem in ie11 and chrome 56.
My system is win7.

[gztchan]

+1
@jhchen when i set align to selected line, the editor scroll back to top automatically. I found that once i click the select of align, the editor will lost its focus, and when i click one of options, the editor get focus again, and scrolling happens. What makes me curious is when i do the same thing on the official website of quill, it works well. Would you like to explain that how it works and how can i avoid this?

[MarkoCen]

I experienced the same issue with an inline toolbar. As @gztchan said, the editor on official page is working well. Is it something wrong with the container element? Because in the previous example, the editor appended to body directly, and in official page, the editor appended to a child element of body

[gztchan]

@MarkoCen
After some experiments and debugging, i found that the root of this issue is about the height. The example on quilljs.com is configured with scrollingContainer which let quill instance figure out how tall the editor container is. By the way, height: 100% and overflow-y: auto are the key styles.

I think scrolling in quill is too couple to be comprehended and changed, which makes quill really hard to be customized. It also means that developers have to encounter a lot of pitfalls. :(

[mengdu]

@gztchan @jhchen

I think this is a question of editable div, on chrome, editable div loses focus to get focus will automatically scroll to the top again, I did experiments, div gains focus after reduction problem can be solved by the cursor position, but in qull editor, may be Block Formats do to Range object processing, so there will be a problem.

[jhchen]

@gztchan is correct you need to set the scrollingContainer. This is also demonstrated in the Autogrow Height example in the playground. Adding scrollingContainer in the provided Fiddle solves this issue.

[morfmorf]

@jhchen same here, check video please. Same behaviour with link insertion.

[stargurl16]

Had the same issue and solved it with this quick fix

$('.ql-picker').bind('mousedown',function(e){
        e.preventDefault();
});

[ycjcl868]

same question
caused by this.root.focus(); in quill/core/selection.js

also Clipboard onPaste has the same question

[natan-morar]

Had the same issue and solved it with this quick fix

$('.ql-picker').bind('mousedown',function(e){
        e.preventDefault();
});

awesome fix @stargurl16 ! Thanks!

just a note: You may have to also add this code to componentDidUpdate()

my personal implementation, if you don't want to use jQuery:

document.querySelectorAll(".ql-picker").forEach(tool => {
      tool.addEventListener("mousedown", function(event) {
        event.preventDefault();
        event.stopPropagation();
      });
    });