Third party Some controls activate on mouse up even if the cursor has moved off of them

[PaulB]

Affected version

2.2.0 Beta 1

Typically, I expect the following behavior:

1. Mouse cursor is over a button.
2. Left mouse button is depressed.
3. Mouse cursor is moved elsewhere on the page.
4. Left mouse button is released.
5. Nothing happens.

Some websites, including XenForo, perform one of the following unexpected actions in place of step 5:

1. The button over which the cursor was positioned at step 2 is activated.
2. The button over which the cursor was positioned at step 4 is activated.

Prior to the widespread use of touch devices, this wasn’t a big deal. However, XenForo exhibits these problems on touch devices.

For example, in Safari on iOS:

1. Open the formatting menu in the editor so that the Spoiler button is visible.
2. Drag the page by placing your finger on the Spoiler button. You may need to play with the timing a bit. On my device, I have to pause after placing my finger down for fraction of a second before starting to scroll.
3. The Spoiler dialog will open when you finish scrolling.

 

[Chris D]

Typically, I expect the following behavior:

1. Mouse cursor is over a button.
2. Left mouse button is depressed.
3. Mouse cursor is moved elsewhere on the page.
4. Left mouse button is released.
5. Nothing happens.

Some websites, including XenForo, perform one of the following unexpected actions in place of step 5:

1. The button over which the cursor was positioned at step 2 is activated.
2. The button over which the cursor was positioned at step 4 is activated.

Can you provide a practical example of this on other devices aside from touch devices or aside from iOS? Please provide browser and OS versions. I can't reproduce anything similar with latest Chrome on latest macOS Beta. We really need a specific reproduction case.

For example, in Safari on iOS:

1. Open the formatting menu in the editor so that the Spoiler button is visible.
2. Drag the page by placing your finger on the Spoiler button. You may need to play with the timing a bit. On my device, I have to pause after placing my finger down for fraction of a second before starting to scroll.
3. The Spoiler dialog will open when you finish scrolling.

This is not really something I see as unexpected.

In my following of this example, I can see that the spoiler button gets activated but IMHO - it should do. The page scrolls but your thumb is still on the spoiler button and that element stays at the same position on the screen and follows your thumb.

If you move your thumb horizontally while scrolling and you end up on a different button or a different part of the screen - nothing is triggered and this is as I would expect.

Now I do accept that behaviour is slightly different than other native XF elements. It is so because the editor is written by a third party and they have written it in that way and it's very likely a little too low level and honestly not worth our time trying to resolve it.

But the other point is that this behaviour is actually much improved over the behaviour of XF 2.1 and 2.0 whereby scrolling would be blocked entirely if initiated from a toolbar button and we're happy to accept whatever caveats come with that improved behaviour.

I will leave this open on the basis of the original example not being complete or verifiable pending further info but on the basis of the iOS example there's no changes that we should make here.

 

[PaulB]

If you move your thumb horizontally while scrolling and you end up on a different button or a different part of the screen - nothing is triggered and this is as I would expect.

That’s not true, actually. Try moving horizontally from Spoilers to Emoji. Even though you release on Emoji, Spoilers will trigger.

I’ll see if I can come up with a good desktop repro case, but I think that’s much more obscure than the touch case, so I haven’t been paying much attention to it. I do know of one scenario; I’ll head over to my desktop in a few minutes to write it down.

If I drag the page to scroll, I’m not paying any attention to what’s under my finger. Chances are it’s a control, but I don’t expect it to activate as long as my finger moves. If I try the same thing with the Post reply button, it isn’t activated.

 

[PaulB]

In Chrome 84.0.4147.89 on macOS Catalina 10.15.6 (19G73)

 

[Mike]

In terms of the editor button example, this is related to Froala though it's actually also related to how they trigger button "clicks". It doesn't actually use a click event due to difficulty with selection management in a contenteditable section by the time that is fired. I doubt it's something that they will change and on the whole, I don't think we'll be making any changes there for it either.

The second video is something I've run into, though monitoring the events that are triggered in that scenario, a click event is actually triggered on the body element and this is how we monitor when someone clicks to close a menu. It's possible we could make the whole event chain more complex to try to account for this, but I don't think this is something we're going to change at this point.

 

[PaulB]

The second video is something I've run into, though monitoring the events that are triggered in that scenario, a click event is actually triggered on the body element and this is how we monitor when someone clicks to close a menu. It's possible we could make the whole event chain more complex to try to account for this, but I don't think this is something we're going to change at this point.

event.toElement, event.srcElement, and event.path all contain the necessary information for this. I'm not sure why it would need to be made more complex.