Passing the close function from Dialog to the Modal component

[ziyak97]

I’m using the SlideUpModal component which requires an onClose prop. However, I can only access the close function inside the Dialog component which needs to be nested under the Modal. How can I pass the close function from the Dialog to the onClose prop of the SlideUpModal component?

<DialogTrigger>
  <Button>Open Modal</Button>
  <SlideUpModal isDismissable>
    <Dialog>
      {({ close }) => (
        <>
          <p>Content of the modal</p>
          <Button onPress={close}>Close</Button>
        </>
      )}
    </Dialog>
  </SlideUpModal>
</DialogTrigger>

In this example, we need to pass the close function from the Dialog to the onClose prop of the SlideUpModal, but it’s not clear how to do that.

[reidbarber]

I'm not sure what the SlideUpModal component is, so it may be useful to post a codesandbox to give some additional context. Maybe you can consider making it controlled instead?

[ziyak97]

if i make it controlled I'll no longer need dialog trigger and dialog and will be able to open and close it programmatically? on a side not since native dialog is now widely supported would there be an eventual transition to that?

[reidbarber]

Correct, you can just set the controlled state with the Button's onPress. And I don't think we will switch to a native dialog soon since it would be a breaking change, and it may prevent normalizing some features across browsers (focus, styling, scrolling, etc.).

[ziyak97]

okay thanks a ton I'll give this a shot tomorrow and report back on if it works 😁

[snowystinger]

Couple other things to try, you could look at our nightlies for this functionality #4684
You could also try inverting the order and wrap the SlideUpModal inside the Dialog

[ziyak97]

just inverting it worked 😁. i actually tried this earlier but was getting unexpected results which turned out to be me just messing up my SlideUpModal code. thanks a ton!

[ziyak97]

my issue had been resolved check the comments on the post for further details.