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

Toast message displays behind the Modal dialog (with backdrop) #2743

Open
abaksha-sc opened this issue May 5, 2023 · 0 comments
Open

Toast message displays behind the Modal dialog (with backdrop) #2743

abaksha-sc opened this issue May 5, 2023 · 0 comments

Comments

@abaksha-sc
Copy link

abaksha-sc commented May 5, 2023

  • components: Toast + Modal
  • reactstrap version 9.1.9
  • import method es
  • react version 18.2.0
  • bootstrap version 5.2.3

What is happening?

Toast message displays behind the Modal dialog (with backdrop).
In this case it's impossible to close the toast.

What should be happening?

Toast should be displayed in front of Modal dialog.

Steps to reproduce issue

See the fiddle to reproduce: https://stackblitz.com/edit/reactstrap-nkgxfy?file=Example.js

Workaround

Wrap the toast with <div className="toast-container">{toast}</div>.
https://stackblitz.com/edit/reactstrap-ax4wrl?file=Example.js

It seems acceptable, but would be great to make it with reactstrap, but not manually.

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

No branches or pull requests

1 participant