[Switch] The dragEnd() function needs to make sure the switch is in an allowed position

[tomayac]

The dragEnd() function, triggered by pointerup, needs to make sure the switch is in an allowed position. Currently it is possible to drag the switch, then without releasing the finger drag outside of the switch so that the switch is in an "in-between" visual state, and then release the finger.

gui-challenges/switch/index.js

Line 37 in fd7753b

const dragEnd = event => {

[argyleink]

when i release, it doesnt stick, it slides to either side. which browser are you on?

i have a window.onpointerup event, which is when the thumb position is evaluated to decide on/off. curious which scenarios you're in that arent firing that event.

[tomayac]

Try it on an actual device. The movement you make is exactly correct and repros the behavior.

[argyleink]

which device you on? works great on my devices and emulators.

screen-20210816-082445.mp4

[tomayac]

This is on iOS 15 (with the funny Safari bottom URL bar, which might be interfering when it comes to scroll and drag handling?) on an iPhone 11 Max Pro.

[argyleink]

looks like an iOS bug that if the user begins the drag with vertical movement, the page is scrolled and then the pointerup event (or move events) are never fired. the beginning of the gif shows the desired ux but is also beginning the swipe horizontally. the end of the gif, showing the undesired ux, is when the drag event is competing with page scroll.

i think there's a lot of complex stuff happening here with touch-action, page scroll and pointer events and iOS is prioritizing the page scroll over the pointer events? i'm not sure how to fix this other than preventing document scroll when the gesture has begun from inside one of these switches. maybe touch-action can help more here, cuz it's already preventing page horizontal scroll when panning the thumb (ipad was the main offender of horizontal page scroll competing with horizontal drag of the thumb).

have ideas? did i isolate the bug in the above gif?

[tomayac]

Yeah, it looks like preventing scrolling could help improve the situation. It’s indeed pretty complex to debug what’s going on.