Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement of Dialog dismiss function #86

Closed
fabiozaffani opened this issue Nov 21, 2014 · 1 comment
Closed

Enhancement of Dialog dismiss function #86

fabiozaffani opened this issue Nov 21, 2014 · 1 comment
Labels
component: dialog This is the name of the generic UI component, not the React module!

Comments

@fabiozaffani
Copy link

Currently you can pass a dismiss function from the parent component to the dialog component, which will be called when the button "Close" (or any other actions that you specify) is clicked inside the dialog component.

The problem is that the _handleClickAway and _checkEscapeKeyUp keep pointing to the default dismiss function that comes with dialog component, they should also be able to update and point to the correct new dismiss function specified in the parent component.

Here's a situation that this is problematic:

  1. I have a parent component which lists many products, once a product is clicked the dialog appears with the specific product data;
  2. The parent component dynamically insert the dialog based on the state of the currently selected product, passing the product data to be shown inside the dialog;
  3. Once the user intent to close the dialog, the parent component needs to: unset the selected product from it's state, change the dialog state to false (by calling the dialog dismiss directly), and then remove the dialog from the DOM (optionally);

Now to achieve that you can pass the parent dismiss function performing the state update and then calling this.refs.dialogRefName.dismiss(), but if the user closes the dialog by clicking away or pressing ESC the parent dismiss function from the parent is not called, thus not allowing it to update the state of the current selected product.

@fabiozaffani
Copy link
Author

By looking at the code, it's clear that a easy way to accomplish that would be to add a callback on the dismiss method just like there is already one in the show method, something like this:

if (this.props.onDismiss) this.props.onDismiss();

@oliviertassinari oliviertassinari added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 25, 2022
@zannager zannager added component: dialog This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: dialog This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

3 participants