How to properly deal with OK/cancel dialog answsers?

[janvorwerk]

Hello,

I am using a standard OK/Cancel dialog except that the "Cancel" options needs to undo a little thing.

I initially started by implementing onPress() on the two buttons, until I realized that hitting ESC would close the dialog wihout calling my onCancel() callback.

So I had to add an additional boolean in my component, which isn't even a component state because the onOpenChange() method is called in the same React cycle as my call to the close() method. When I call close() manually, it's even in the same call-stack apparently:

Here is my code with the confirmed boolean:

function Foo() {
  let confirmed = false;
  function onOpenChange(isOpen: boolean) {
    if (isOpen) return;
    if (!confirmed) {
      // user pressed cancel button or ESC key
    } else {
      // user pressed OK
    }
  }

  ....
    <Button
      onPress={() => {
        confirmed = true;
        close();
      }}
    >
      OK
    </Button>
  ....
}

Hence my question/suggestion: would it make sense to allow and provide a parameter to the close() method, that would be passed to the onOpenChange() method?

My fear with the above code is that a future version of react-aria no longer calls onOpenChange() in the same React loop and my
confirmed boolean no longer works and needs to be changed to a state variable.

Any thoughts?

Thanks for reading.

[reidbarber]

Have you tried using a ref to hold this state?

[janvorwerk]

Good idea! I tend to think of ref mostly for DOM references... my bad!
Thank you @reidbarber ! 🙏

For anybody finding this discussion in the future, this works very well and I feel more comfortable with it:

function Foo() {
  const confirmed = useRef(false);
  function onOpenChange(isOpen: boolean) {
    if (isOpen) return;
    if (!confirmed.current) {
      // user pressed cancel button or ESC key
    } else {
      // user pressed OK
    }
  }

  ....
    <Button
      onPress={() => {
        confirmed.current = true;
        close();
      }}
    >
      OK
    </Button>
  ....
}