Skip to content

Fix the issue where some dialogs cannot be closed when using nested providers#157

Open
IVLIU wants to merge 3 commits into
eBay:mainfrom
IVLIU:fix/nested-provider-error
Open

Fix the issue where some dialogs cannot be closed when using nested providers#157
IVLIU wants to merge 3 commits into
eBay:mainfrom
IVLIU:fix/nested-provider-error

Conversation

@IVLIU

@IVLIU IVLIU commented Jun 4, 2024

Copy link
Copy Markdown

relate issues

feature

  1. optimize parts of the TypeScript implementation.
  2. the issue of being unable to close the popup when using nested providers.

sample

Please refer to the following example.
You can switch the imports to see the effects before and after the fix.

https://codesandbox.io/p/sandbox/nice-modal-sample-l4hj7d?file=%2Fsrc%2FApp.tsx%3A50%2C64

and

I tried to maintain compatibility as much as possible, so I added extra parameters to the show, hide, and remove methods to support dispatch definition.

@IVLIU

IVLIU commented Jun 4, 2024

Copy link
Copy Markdown
Author

@supnate Please review this PR if you have time.

@IVLIU IVLIU changed the title fix: The issue of being unable to close the popup when using nested p… Fix the issue where some dialogs cannot be closed when using nested providers Jun 4, 2024
@HiChen404

Copy link
Copy Markdown

Great ! solved my problem.

@rm86626

rm86626 commented Jun 4, 2024

Copy link
Copy Markdown

谢谢,我在开发中也遇到了同样的问题,已解决

@supnate supnate self-assigned this Jun 7, 2024
@IVLIU

IVLIU commented Jun 25, 2024

Copy link
Copy Markdown
Author

Additionally, if you prefer not to use useModal, that's also an option.

import { show, DispatchContext } from '@ebay/nice-modal-react'

const dispatch = useContext(DispatchContext)
show(Dialog, { name: 'hello world' }, dispatch)

or

import { show, reducer, initialState, Provider } from '@ebay/nice-modal-react'
const [modals, dispatch] = useReducer(reducer, initialState)

show(Dialog, { name: 'hello world' }, dispatch)

<Provider modals={modals} dispatch={dispatch}></Provider>

@IVLIU

IVLIU commented Jun 25, 2024

Copy link
Copy Markdown
Author

Perhaps we can provide a hook to automatically bind the dispatch.

const { show, hide, remove, Provider } = useProvider()

Of course, the naming still needs consideration.

@IVLIU

IVLIU commented Jun 25, 2024

Copy link
Copy Markdown
Author

I kept the deprecated_dispatch approach for progressive enhancement, ensuring that the previous code can still run perfectly. However, I'm not sure if deprecated is the right term.

@svajunas-budrys

Copy link
Copy Markdown

Any update on this?

@IVLIU

IVLIU commented Sep 23, 2025

Copy link
Copy Markdown
Author

Any update on this?

No one handles this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants