Changing routes with Modal (onExit, modal behavior)

[oyeanuj]

Hi @davidtheclark! Firstly, thanks for providing this library - it has been great to be able to use it. I was running into some issues when integrating this with route changes.

My use-case is very similar to Pinterest/Product Hunt's behavior. There is a feed of posts and clicking on the post opens the same component in a modal view. Accompanying that action is a route change (from the feed to the post url). React-Router illustrates this example in their repo here with their own little modal - https://github.com/reactjs/react-router/tree/master/examples/pinterest

Doing the with this library however led to the following issues. I'd love to understand workarounds and/or if I am missing something -

1. onExit function being required. I am wondering if it needs to be required when modal's visibility depends on the route instead of a change? The two cases that I ran into -
   1. Ideally, I'd like my 'X' link to be <Link> which navigates to previous url. In that case, I am not sure what best to pass to onExit - an empty function? Either way, it prevents link from navigating away.
   2. Lets say, if I instead choose to go the button route for 'X/close'. And if my onClick function is goBack(). What should my onExit function be then? The same? It seems like that function is being invoked twice when I click on 'X/Close' button?
2. In the above Pinterest/Product Hunt example, ideally, I'd like to run the same component as a child of the AriaModal. That is, clicking on the Post component in preview mode opens the Post component in the modal view. The code looks something like below.

//in Post component
return(
 this.props.showInModal &&
  <AriaModal
    {...this.props}
    onExit = {this.props.onExit}
    underlayClass = {underlayClass()}
    underlayClickExits = {underlayClickExits()}
    escapeExits = {escapeExits()}
    applicationNode={document.getElementById('my-app')}
  >
    <Post {...this.props} />
    {renderCloseButton()}
  </AriaModal>
);

When I do this, I see a route change and the modal pops up fine but the original content of the page disappears from behind. Do you think this is a react-router issue or an issue of invoking the a component from itself as a child of the modal (like shown in the code above)?

Thank you!

[davidtheclark]

I am not sure what best to pass to onExit - an empty function?

Yeah — why not a noop function: function() {}? Did this not work for you?

I see a route change and the modal pops up fine but the original content of the page disappears from behind.

Sorry, I can't really help debug this. If the modal is working fine, then I guess it's probably not a problem with this module?

[oyeanuj]

Thanks for the response, a couple of follow ups.

Yeah — why not a noop function: function() {}? Did this not work for you?

This doesn't work well with <Link> transition as the link transition doesn't seem to work when a noop is passed.

Could you also clarify the other behavior question above -

Lets say, if I instead choose to go the button route for 'X/close'. And if my onClick function is goBack(). What should my onExit function be then? The same? It seems like that function is being invoked twice when I click on 'X/Close' button?

Finally re: this -

Sorry, I can't really help debug this. If the modal is working fine, then I guess it's probably not a problem with this module?

That sounds fair. I guess my question was more around whether I should expect any weirdness when invoking a modal from a component and passing that same component (albeit with different props) as a child to the modal?

[oyeanuj]

@davidtheclark Just wanted to follow up on the above questions - any thoughts would be very helpful for me figuring out the issue.

[davidtheclark]

Sorry, as I said above, I can't really help debug this from afar.

[davidtheclark]

Closing this issue as stale. @oyeanuj if you can provide a simplified example demonstrating a problem, please feel free to open a new issue.