Prevent Swipe On Dragging

[AhmetCetinn]

Local state update cannot be blocked while dragging.

Case: If switch update depend on some conditions and conditions not suitable for update switch state, state update should not be allowed while dragging..

New props can be added to avoid updating the local state on dragging issue.

[markusenglund]

Ok, I suppose it's possible to add onDragStart and onDragStop props to let library users know when dragging takes place, but I'm not sold on it.

Can you tell me more about your specific use-case?

[himalayagupta]

I am having facing similar issue. Render the Switch with a state checked=true. Then try to drag to make the switch unchecked. In the onchange event ignore the state change.

Expected: The switch should retain the checked state. Current behavior: The switch stays in unchecked state.

Antd Example: https://codesandbox.io/s/hungry-khorana-9bxsi Here if we try to toggle, the event is fired but the switch retains its state based on the "checked" flag

[Deykun]

I had to solve that issue in my project with that:

const handleChange = (checked) => {
    setKey( v4() )
    onChange( checked )
}

It isn't a good approach.

[rtt63]

Looks like it's not such a rare use case. Stuck with that too

[eliaquin]

I'm also stuck with that.

[markusenglund]

Hi, sorry for responding to this so late. I misunderstood what the issue was about previously. Thanks for @himalayagupta for the explanation.

I agree that the issue is important. I implemented a fix which works by always resetting the switch handle's position when the user stops dragging, even when they drag it more than halfway to the other side. If the library user doesn't change the checked prop in the onChange handler, the switch handle will move back to the previous position just like you would want. If the library user does change the checked prop it will work pretty much just as before since the position state updates will come within milliseconds of each other.

You can check out how it works in this link if you go to the example labelled "Switch which cannot be turned back off".

This will almost certainly be merged and published for the 6.0.0 version.

[Atabic]

@markusenglund It's still happening even after I upgraded my version to 6.0.0. In the onChange function, I show a SWAL alert that asks for a user to share the project or not. On clicking cancel I'm not updating any state for the "checked" prop. I'm only updating the state when the user allows sharing of the project but It doesn't come back to its original state i.e "On". I'm dragging it to turn off the switch. My issue is much similar to mentioned in above issue

[markusenglund]

Could you create a minimal reproduction of the issue in this code sandbox? If you can, please also tell me which browser and OS you're using.

[Atabic]

Code Sandbox It's not replicating in the code sandbox but it's happening in my project. Can you give an idea of why this is happening in my project, Is there some library or other dependency that can affect the way react switch behaves?

[markusenglund]

Hard for me to say. Do you get the issue if you run the exact same project from the sandbox on your local machine? (There's an 'export to zip'-feature in code sandbox)