DialogTrigger question in RAC #6815

p1pah · 2024-08-01T18:51:52Z

p1pah
Aug 1, 2024

Good afternoon, I am just trying to understand a proper usage for DialogTrigger. https://react-spectrum.adobe.com/react-aria/Dialog.html#example. Should this Trigger only be used when using a button to open a child modal/dialog? If I wanted to trigger a child modal/dialog from some sort of background process rather than a button, would the correct usage be something like this?

  <Modal isOpen={shouldOpen}>
    <Dialog>
      {({ close }) => (
        <form>
          <Heading slot="title">Sign up</Heading>
          <TextField autoFocus>
            <Label>First Name</Label>
            <Input />
          </TextField>
          <TextField>
            <Label>Last Name</Label>
            <Input />
          </TextField>
          <Button onPress={close} style={{ marginTop: 8 }}>
            Submit
          </Button>
        </form>
      )}
    </Dialog>
  </Modal>

I noticed when wrapping a DialogTrigger in the above example like so:

<DialogTrigger isOpen={shouldOpen}>
  <Modal >
    <Dialog>
      {({ close }) => (
        <form>
          <Heading slot="title">Sign up</Heading>
          <TextField autoFocus>
            <Label>First Name</Label>
            <Input />
          </TextField>
          <TextField>
            <Label>Last Name</Label>
            <Input />
          </TextField>
          <Button onPress={close} style={{ marginTop: 8 }}>
            Submit
          </Button>
        </form>
      )}
    </Dialog>
  </Modal>
  </DialogTrigger>

The nested children in the Dialog trigger was actually being mounted even when shouldOpen was false (not sure if DialogTrigger was the true cause), which led me to actually blowing up Chrome with a lot of Modals 🤣. Is my understanding correct that DialogTriggers should only be used when the immediate child is a Button? Thanks for this awesome library BTW!!