eBay / eBay/nice-modal-react

[Request] Possibility of calling modal.resolve/modal.reject after modal.hide

Open
#177 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
2.3k
Forks
127
PR merge metrics
No merged PRs in 30d

Description

Description:

In the current implementation, calling modal.resolve() is only possible before calling modal.hide(). This is because modal.hide() clears the internal promise array during its execution.

https://github.com/eBay/nice-modal-react/blob/69050f81011340c650ea953f4cc13863cbe4225e/src/index.tsx#L265

However, when animations are involved, it’s often desirable to resolve() the modal’s promise after the hide animation has completed. This prevents potential conflicts or visual glitches that might occur if another animation is triggered immediately after the modal starts closing.

Example:


// modal component 
const handleClose = () => {
    modal.resolve();
    modal.hide();  // modal animation started
}

// external call 
modal.show().then(() => {
// another animation started in parallel
})

Possible Solution:

  • Consider allowing modal.resolve() to be called after modal.hide() without causing issues.
  • Expose a new method, for example modal.resolveHide(), to handle this use case

Expected behavior (mu5 for example):

// dialog props 
{
    open: modal.visible,
    onClose: () => modal.hide().then(() => {
		// resolve show 
		modal.resolve();
		!modal.keepMounted && modal.remove();
	}),
    TransitionProps: {
      onExited: () => {
	// animation ended
        modal.resolveHide();
      },
    },
  };
};

// external call 
modal.show().then(() => {
// another animation started
})

P/s: Am I missing something, and is this behavior already achievable in the current implementation?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in src/index.tsx around the linked line 265 and trace how modal.hide() clears the internal promise array and how modal.resolve() is exposed. Compare the proposed onClose and onExited lifecycle with the current behavior; done means the intended post-hide animation promise resolution is defined and works without conflicting with removal or keepMounted handling.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.