Add asynchronous trigger to Dialog, Collapsible...

[chapman-cc]

Feature request

Summary

ad prop to <Dialog.Close> or <Dialog.Trigger> to await triggering closing a dialog upon success

Examples

function SaveDialog() {
  const mutation = useMutation({
    mutationFn: (data) => saveData(data),
  });

  return (
    <Dialog.Root>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      
      <Dialog.Portal>
        <Dialog.Backdrop />
        <Dialog.Viewport>
          <Dialog.Popup>
            <Dialog.Title>Confirm Changes</Dialog.Title>
            
            <Dialog.Description>
              Are you sure you want to proceed with this update?
            </Dialog.Description>

            <div className="controls">
              <Dialog.Close>
                Cancel
              </Dialog.Close>

              <Dialog.Close 
                resolve={() => mutation.mutateAsync()} 
                className="confirm-button"
              >
                Confirm
              </Dialog.Close>
            </div>
          </Dialog.Popup>
        </Dialog.Viewport>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

Motivation

The dialog like components where there is a <Dialog.Trigger> or similar, can only handle syncronous events.
I would like a variation like <Dialog.AsyncTrigger resolve={promise}> to handle scenario where
user open a dialog, the footer has a button that does trigger an async action e.g. "Save" and then close the dialog upon success, and I don't have to add useState to control it to have a cleaner component composition.

[linear]

BAS-453

[CiscoFran10]

My impression is that this probably belongs in user land rather than Base UI itself. The main benefit seems to be DX, but it would also add async-specific behavior and edge cases to a primitive that is currently pretty small and composable.

I put together a small demo here showing a custom Dialog.Close wrapper approach:

That wrapper keeps the same general composition shape, but lets Dialog.Close await an async action and only close on success.

https://stackblitz.com/edit/gqinovm6?file=src%2FApp.tsx

Other options are:

Controlled state with open / onOpenChange, then closing after the async action resolves. That is also the pattern currently shown in the Dialog docs for async submit flows.

const [open, setOpen] = React.useState(false);

<Dialog.Root open={open} onOpenChange={setOpen}>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Popup>
      <form
        onSubmit={async (event) => {
          event.preventDefault();
          await mutation.mutateAsync();
          setOpen(false);
        }}
      >
        <Dialog.Close>Cancel</Dialog.Close>
        <button type="submit">Save</button>
      </form>
    </Dialog.Popup>
  </Dialog.Portal>
</Dialog.Root>;

If you want to keep the dialog uncontrolled, Dialog.createHandle() also works via detached triggers. It works for this, although I am not sure whether that is the intended pattern for this specific use case.

const dialog = Dialog.createHandle();

function ExampleDialog() {
  const saveMutation = useMutation({
    mutationFn: saveProfile,
    onSuccess: () => {
      dialog.close();
    },
  });

  return (
    <Dialog.Root handle={dialog}>
      <Dialog.Trigger>Edit profile</Dialog.Trigger>

      <Dialog.Portal>
        <Dialog.Popup>
          <Dialog.Title>Save changes</Dialog.Title>
          <Dialog.Description>
            Confirm to save your profile changes.
          </Dialog.Description>

          <Dialog.Close disabled={saveMutation.isPending}>Cancel</Dialog.Close>

          <button
            type="button"
            onClick={() => saveMutation.mutate()}
            disabled={saveMutation.isPending}
          >
            {saveMutation.isPending ? 'Saving…' : 'Save'}
          </button>
        </Dialog.Popup>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

[chapman-cc]

@CiscoFran10 thanks I am not aware of this new baseui feature createHandle() method, this will be handy
I came from using shadcn radix components so it's new to me

[CiscoFran10]

@chapman-cc To be honest, I’d probably just use regular useState here. createHandle() seems more aimed at detached or external dialog control outside the root dialog context, so I’m not sure it is the best fit for this case. It does work, but I don’t think it is necessarily the intended pattern for this kind of flow. maybe try extracting your use case into a hook instead.

[michaldudak]

createHandle is perfectly fine here. It isn't tied specifically to detached triggers only. If you prefer an imperative close() method over a controlled state, feel free to use it.