search

nickmcmillan / react-physics-dragger

A simple, no-frills horiztonal dragger/slider with physics
202 stars 10 forks source link

Tabbing updates position but Dragger doesn't respect it #13

Closed ccveer closed 5 years ago

ccveer commented 5 years ago

Repro steps: 1) Go to the example site (https://react-physics-dragger-demo.netlify.com/) and inspect the page. 2) Uncheck 'outline: 0' in the 'item-standard' class for the items in the first dragger. 3) Click on the page header and hit tab twice. 4) The first item in the dragger should be highlighted (reason for removing outline: 0) 5) Hit tab 5 more times 6) Attempt to drag (with the mouse) the slider back to the start

Expected Result: The dragger allows you to drag back to the beginning.

Actual Result: The dragger acts as though it is already at the beginning and bounces off the edge even though there is content to the left.

nickmcmillan commented 5 years ago

Yep, valid bug, thanks for spotting it. I'll take a look.

nickmcmillan commented 5 years ago

So what I've learned here is that browsers will adjust the scroll position of a parent container to show the actively focused child element. I couldn't find a way to prevent this.

Instead, I've simply set the parent element to scrollTo(0, 0) when it is blurred. This resets whatever re-positioning the browser previously did to it.

nickmcmillan commented 5 years ago

Released on npm v1.2.1