Quill: Jumping cursor on selecting style in toolbar

[rafalradomski]

I found serious issue when I click few times on style button in toolbar the cursor jumping to top of the editor...

Please watch the: http://postimg.org/image/4ef3tsq9x/

Is very annoying. Do you know how to fix it?

[jpfortier]

This is the same issue I reported. Mine was closed.

https://github.com/quilljs/quill/issues/277

[jhchen]

Do you also have ChromeIPass @radiart?

[rafalradomski]

@jhchen no I never used it, I'm using Chrome Version 45.0.2454.99 m if it help

[momoiroshikibu]

I found this issue too...
My Google Chrome version is 45.0.2454.101 (64-bit).
I'm not using any extensions.

[rafalradomski]

Any chance to fix it in the nearest future?

[jhchen]

Thanks for the video @radiart -- they are very helpful in trying to reproduce and thus identify the root cause. Unfortunately I'm still not able to do so on Mac, Windows, or Ubuntu.

• What OS are you using?
• Can you also try to disable all extensions and see if the problem persists?
• Not sure what the m suffix means.. is that a typo or are you using a mobile build or something (from the reported version 45.0.2454.99 m)

@jpfortier if you feel your issue #277 is unresolved please feel free to repost there. Since two users on that thread reported the same issue and determined the cause to be a chrome setting/extension I assumed that was the case for you too.

[rafalradomski]

Hi @jhchen I turned off all extensions in Chrome and still see this issue.

My OS:
Windows 7 Enterprise
Service Pack 1
Win 7 x64 5-8-2015

I using normal desktop browser Chrome 45.0.2454.99 m, when I check updates, I see:
Google Chrome is up to date.

[andrew--grant]

Just to add to this issue - we have seen the same thing across a range of machines and OS's. The quill software itself is not working (its fundamentally unusabe at this stage as it cannot be used for editing text).

I didnt spot this thread and posted under #500

Be keen to see movement in the future as this could be a decent editor for programmers to extend and customise, though looks like we have to move on to something else for this project :(

[pedromdias]

To add more information:
I have the same problem on Chrome in Windows 8.1.
All extensions are disabled.
I have the error when I use the mouse, but NOT when I use the touchpad.

[andrew--grant]

To concur, like @pedromdias, issue only when I use the mouse, but NOT when I use the touchpad.

[jhchen]

I'd really would like to see this bug fixes but I've tried on every Windows environment I have access to and cannot reproduce the issue. This includes Windows 8.1 boot camp, Windows 7, 8, 8.1 and 10 on vmware virtual machines and Windows 7, 8, 8.1 and 10 on Sauce Labs, all on the latest versions of Chrome with a mouse.

• @radiart silly question but why is your chrome's top bar black in the video?
• @radiart can you try on chrome canary and let me know if it also occurs?
• Can someone corroborate @andrew--grant's claim this same issue also occurs on other OSs?
• If anyone can reproduce on Sauce labs or browserstack please comment with the environment you used

[rafalradomski]

Hi @jhchen

1. Black bar is probably because I created GIF file from movie ;)
2. On fresh chrome canary Version 48.0.2540.0 canary (64-bit) I see the same issue

[jhchen]

@radiart This black bar is from your screen capture software?

[rafalradomski]

@jhchen yes

[jhchen]

What software did you use? It somehow decided to make the normally blue chrome bar black, but left the tab itself unaffected, as well as the new tab button.

[rafalradomski]

@jhchen I don't understand why you asking about how I made a movie, it doesn't matter. I used first solution that I found on internet just to show you the problem.

The problem is that the cursor is jumping, please focus on that ;)

[jpfortier]

My other ticket has a video linked:
https://github.com/quilljs/quill/issues/277

[jhchen]

@radiart I've tried to reproduce this issue on a clean unadulterated version of Chrome on every single Windows version on multiple platforms with no avail. That makes me think you're using a not so clean version of Chrome that may be causing or confounding the issue. Your non-standard black Chrome bar makes me think that more. I do not believe the claim that a general purpose video conversion software happens to produce artifacts that affect only the Chrome tab bar.

Here're some things that would be more helpful:

1. The name of the Chrome tab bar modifying video software.
2. Another video recording your entire screen and include in it at the end visiting chrome://extensions/ and scrolling through the extensions with all of them being disabled.
3. Launch a SauceLabs browser with the session being recorded, reproduce the issue, and provide the link to that recorded session.

[jpfortier]

I use Screencastify to record. I noticed it may be related to the click area of the toolbar controls. There's a small area under the buttons that is clearly in the toolbar area, but not within the hover area of the button. If you click there the cursor moves to the top of the text below where you click.

Here is my webm recording:
http://webmshare.com/qogdg

[andrew--grant]

@jhchen so we can now rule out the screen recording.

@jpfortier I see what you are saying, but this seems not so simple as that. Even when I click on the hoverable area, and use the exact same region, this bug still occurs. One area/region will work at times, but then not at others.

I can click, say, bold button, without moving the mouse at all, and it will bold then unbold as expected ten times in a row. I can wait a few seconds, leaving the mouse in exact same position, click again, and suddenly the cursor starts hopping out of place.

I can see this behaviour across platforms, machines and identified by several of our engineers and admin staff.

[jhchen]

@andrew--grant It's not the screen recorder--it's any number of Chrome extensions that I wanted to rule out

Thank you for your input @jpfortier. The new theory is clicking a particular way under the buttons you mentioned is the cause. Specifically if you push down on the mouse, move even 1px, and then release, the cursor will jump to the closest spot to your release. If you mousedown with no move then mouseup, the cursor will not move:

This would explain why some people consistently experience this bug and others not as people probably consistently click the same way. Perhaps this is harder to do on a touchpad which would explain that difference as well.

Can the people that consistently experience this bug test out this theory? You can be sure you didn't move the mouse by attaching a mousemove listener:

$('#toolbar').mousemove(function(e) {
   if (e.which != 0) console.log('mousemove');  // e.which will be 1 when the mouse is also down
});

[jpfortier]

Yup, when the issue occurs, I have a mouse move event.

[rafalradomski]

@jhchen any news?

[jhchen]

I'm not doing any more releases before 1.0 so this will be fixed then.

[Yuyz0112]

I'm also experiencing this bug but I think there is other factors account for this problem.

I found I can bold or italic the text in the basic example, but cannot do that in the full example.(Visiting the example page by Chrome)
So I read the code difference between two examples and I found the basic version use 'button' label where the full version use 'span' label. Then I tried in my project. When I replaced the 'span' label into 'button' label, the button works correctly! After that I also tried 'div' label, it shows the same bug as 'span' label.

I also had attached the mousemove listener, it showed I have mousemove event in every situation. When I click on a 'button' label, there is only one mousemove event. But if I click on a 'span' label, there will be randomly 1,2,3 or even more mousemove event.

So my solution is change the 'span' labels which wrap the tools into 'button' label and change the style of button. I'm not sure why this happened but it only happened in Chrome.(Even not happening in other webkit core browsers.)

BTW, this bug only shows in the formats which you defined as 'Toggle'.

P.S I'm not using chromeIPass.
@jhchen

[azole]

$(".ql-format-button").on('mousemove', function(e) {
   e.preventDefault();
});

When ql-format-button skip mouse move event, the jump cursor situation doesn't happen again.

[kleinph]

I also experienced this issue.
I think it is related to the fact that "selection-change" events are also fired when selection does not change but the user clicks on toolbar buttons. This maybe has something to do with that the focus detection in https://github.com/quilljs/quill/blob/v0.20.1/src/core/selection.coffee#L16 checks if the activeElement is the editor container, but sometimes the activeElement is actually the <body> when clicking on the toolbar.

In my case preventing the default action for click, mousedown and mousemove on the toolbar prevents firing wrong "selection-change" events:

$("#toolbar").on('click mousedown mousemove', function(e) {
    e.preventDefault();
});

I hope this helps.

[core433]

I tried @kleinph 's solution and it works for me. The issue for me was some of the color boxes were kinda small and if you don't click exactly inside of them you lose the text selection.

[jhchen]

This has been fixed in the 1.0 beta preview.