Handling "Cancel" button in query confirmation modals

I'm building an app and I want to re-fetch data when the query confirmation modal is cancelled.

The workflow is as follows.

Screen Shot 2022-08-09 at 4.02.36 pm

  1. The user toggles a switch, which triggers a query.
  2. The query shows a confirmation modal asking the user to confirm the change (The value of the switch is already toggled on the client side).
  3. User clicks "Ok" on the confirmation modal
  4. The query makes an API call to toggle the value on the server side
  5. Regardless of query success or failure, I show a success/failure notification and refetch data to show the updated value.
  6. The values shown are in sync with what's on the server

However workflow breakdown when the user presses "Cancel" instead in the query trigger modal. The switch has already toggled the value in the client side but I have no way to trigger a refresh. Now the values are out of sync.

How can I handle this ?

The first thing that comes to mind is to use a modal instead of the query conformation.

Add your two buttons, Ok, Cancel and handle each with appropriate handlers.

However, with a modal you will get a third option which is the user just closing the modal. Use the modal's close event to capture that eventuality and handle as you see fit.

2 Likes

Let me give that a go. Thank you @bradlymathews :slight_smile:

Is there a way to keep the toggle button and handle the 'Cancel' behaviour? I don't want to change the toggle to action buton from a modal, as suggested in this response. Is there a way to refresh the state of the toggle when pressing cancel in confirmation modal?

Hi @SS_SMP we have a feature request to add an event handler that will trigger when a query confirmation is canceled, but currently this isn't supported :disappointed: I'll add your +1 to the feature request and will follow up here if our team ships this feature

1 Like

I would like to add my +1 to this feature. Toggles feel kind of broken without this.