Clicking legend item causes legend to scroll

[chriddyp]

Taking from https://community.plot.ly/t/clicking-legend-entry-causes-legend-to-scroll/3361

This came up in the Dash workshop with one of the attendee's apps. When they click on a legend item, the legend scrolls before the click is fired, causing the legend click to fire on a different item. Very annoying!

One of the attendees and I recreated an example here: https://codepen.io/chubukov/pen/rJdZdz?editors=0010. I can't get it ti misbehave on my computer, but the attendee can. The attendee claims that it is part of the grouped legend functionality, as this example (without groups) https://codepen.io/chriddyp/pen/RQMBmJ?editors=1111 works fine for them.

Attendee says:

I wonder if it has something to do with the extra entries per legendgroup. I played with markers vs lines also, don't think that matters.
It's only clicking in specific spots that triggers the scroll. It seems to be just under the letters that tends to do it. Maybe just when the pointer is about to shift from the hand to the arrow? Not sure exactly, maybe there's some automated way to click in every pixel and see?

[chriddyp]

I believe that the attendee also mentioned that the bug appears in Chrome but not Firefox.

[alexcjohnson]

Annoying indeed! But if we can't reproduce it on our own computers it's going to be awfully hard to fix. I can't trigger it on my own computer or in various OS/Chrome version combinations on Browserstack. Any more info you can dredge up about the platform where this happens?

BTW I wouldn't link this to the Dash milestone - you noticed it while using Dash but it's a straight-up plotly.js issue.

[etpinard]

I can't reproduce this either. Perhaps that dash attendee could share a screen recording to help us debug?

[chubukov]

Sure. Here it is on Chrome Version 63.0.3239.132 on Windows 7 Enterprise. I'm just clicking once when you see the legend scroll.

I can also get the behavior with Firefox, though anecdotally, it seems to happen less often.

[alexcjohnson]

Thanks @chubukov - confirmed on my wife's Win7 computer, though I still can't make it happen in Browserstack with Chrome 63 on Win7... I found a related effect on my mac though, if I right-click on the legend, it grabs the legend scroll handle, moves it to where my mouse is, and doesn't let go until I click again. It looks to me as though somehow that's what's happening with left-click on Windows, then the click event isn't done at that point, it gets propagated to the legend item.

I don't know why that effect (clicking to move the scrollbar handle where your mouse is) exists at all... I suppose if there were a fully drawn scrollbar, not just the handle, it would make sense. But as there isn't, we should just remove that functionality - if it can't happen at all, it won't be able to happen spuriously!

[chubukov]

@alexcjohnson awesome, glad you could reproduce it with your wife's help :)

Just my hunch, but I suspect that even the click and drag to scroll functionality is probably not used that often -- it feels more intuitive to me to use either the wheel or the trackpad two finger scroll.