Looking for some assistance with Toggle click logic i.e. a toggle’s value only changes once consent from a modal has been confirmed.
It sounds like you need logic to set the toggle when the page loads right? As some user might already have the toggle set to true and others might not.
That value should be set on page load, if true then the toggle is green and if false the toggle is closed.
Then, I think you should restrict the toggle logic to just open the modal on click.
Question: Do you always want to show a modal? Even when toggling off?
In the modal, the confirm button should be the one to update that initial toggle state from true to false or false to true.
Does that make sense?
Hi! This is actually not what I’m looking for. The Modal would only turn the toggle ON but the toggle can be turned off if it is already on without the modal.
Is there’s a way for toggle to display current value vs just initial value?
OK I might be over complicating it.
When a user lands on this page what states can the toggle be in?
Toggled off (default?)
Toggle on (previously set)
If the toggle is on, when clicked, set toggle to off.
If toggle is off, when clicked show the modal.
Is that first part right?
If so, then I think all of that logic can live on the toggle itself.
If the modal always shows when going from off to on, then I would have the confirm/save/do it button on the modal handle any logic for updating the backend.
The first part is definitely correct. The trouble is, the logic does reflect your suggestion.
I understand a bit more now.
As a user though, my expectation when clicking a toggle, is that I am clicking it to change it, I would like immediate feedback that it happened, or I will question if it did or not.
So I would expect the toggle to go from grey to blue.
Now, I dont always expect an alert when I change toggles (could be quite annoying for every toggle, it turns a simple single click into a click, read and confirm). But, I have seen this pattern before.
I would suggest that when the user toggles to yes (true), you let it change and show a modal.
If the user cancels the modal, then the toggle goes back to the false state. If they confirm, then the state stays the same and you update the backend.
Toggles are binary, and it sounds like you are trying to add a third state between false and true, that is in place until the user confirms the true.
I am sure others might have a solution specific to your need… but it seems like a lot of work for you and the user.
As long as the user can set the toggle to true or cancel they should be happy?