RangeControl value changes in Safari with mouse over

[coderaaron]

Description

When using Safari on a Mac, if the RangeControl input box has focus, you can change the value simply by mousing over the up or down arrow after you have used either arrow to change the value.

Step-by-step reproduction instructions

1. Go to: https://wordpress.github.io/gutenberg/?path=/story/components-rangecontrol--with-help
2. Click on either the up or down arrow in the text input field
3. Hover over the other arrow (or move your cursor off the clicked arrow and back onto it)

Expected behaviour

Value only increases or decrease when the arrow is clicked

Actual behaviour

Value increases or decreases with only the cursor hovering over the arrow

WordPress information

• WordPress version: 5.7.2
• Gutenberg version: 10.7.4
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Device: Desktop
• Operating system: MacOS 11.4
• Browser:Safari 14.1.1

[stokesman]

I was able to reproduce this.

I couldn't reproduce it on Safari < 13, which is not supported by the react-use-gesture library so it seems likely to be something to do with the drag handling it's supposed to do. It's strange though because a drag should not be triggered and if it is triggered why it only changes the numbers while over the tiny arrows and not over the whole input as intended.

[stokesman]

After testing this some more, it seems to be an issue in react-use-gesture. I was able to make a minimized reproduction of the issue without any Gutenberg code. Simply adding the useDrag handlers on a <input type="number"/> will do it.

If we want banish this bug from Gutenberg we could replace the drag handling with another solution.

[stokesman]

I'd checked in to this at the react-use-gesture repo and it seems to be a Safari bug. There's a simple workaround pmndrs/use-gesture#318 (comment) but if I recall correctly it's not available in the current version of the library. Our easiest option for fixing this seems to be wait until the beta version is stable, upgrade and then use the new setting.

[sitetherapy]

This still happens in WP 5.9 and Safari 15.3. Worse (and I'll report this separately), if you have inserted a column block with 2+ columns and entered content in each column, decrementing the number of columns destroys the content in that columns that are removed. This drag bug makes it easier to do this since the behavior noted in the bug happens in a fraction of a second (i.e. it's incredibly easy to mouse over the control when it has focus and decrement the column count without meaning to).

[stokesman]

Hi @sitetherapy, regarding the column deletion issue we have #9009 in case you'd not see it. It's pretty old.

As for this issue the library I mentioned above is now stable and fixing this could be pretty simple. Maybe I can make a PR soon.

[sitetherapy]

@stokesman - I'd not seen that, thanks.