Slider moves when it receives focus.

Hey folks. Thanks for this super sweet slider component.

We're encountering an issue in which the slider moves slightly when it receives focus. In the following GIF, I am simply tabbing through the input elements. Each slider is accompanied by a number input box. When I tab out of a number input box, focus is being given to the slider on the next row. We can see each slider move slightly as this happens.

In the following GIF, we can see in the console that the <Slider> component is having it's dragging state attribute set to true when it receives focus:

Finally, this GIF shows that when the slider has focus, switching out of the browser window and back in causes the slider to move each time:

I investigated our own code thoroughly. There is not much to it, and even when it is all commented out, this behavior is still displayed. It is apparent that when the slider receives focus, the <Slider> component's onChange handler is being triggered with a slightly increased value.

I suspected it was incorrectly capturing some sort of mouse event. I found that positioning my mouse cursor to the left or right of the slider made no difference in the behavior. The slider handle always moves to the right the same amount.

For now we are going to work around the problem by removing the element from the tab flow, and eliminating any other code we have that gives the slider focus, but any further insight into this would be super.

Cheers.

Start at the component's focus handling and trace why its onChange handler runs when focus is received, using the dragging state described in the issue. Reproduce the tabbing and browser-window focus cases; done means focusing the slider no longer changes its value or sets dragging unexpectedly.