Open Riley-Brown opened 4 years ago
I had a strange issue when rendering a SweetAlert component inside a datatable cell (on a button click). The alert is shown inside the table body and not in foreground. I tried using Reactstrap modal and it worked but I would like to use SweetAlert instead. I believe that a react portal could be the solution.
I am building a new feature for work using SweetAlert and was running into some unexpected behavior when using the alert inside of a position sticky div.
Here's a quick video of the problem https://streamable.com/h3k50
I believe this is happening because SweetAlert appends a div relatively in the html markup which can cause issues if it's inside a container with overflow or in my case, position sticky container elements.
A solution I found was to render the alert in a React portal, which will append the alert to the end of html body, similar to a Bootstrap modal.
Here is the result after rendering in a portal https://streamable.com/xfm3a
Here is a code sandbox demoing my solution https://codesandbox.io/s/stupefied-roentgen-98ouz
Would be great if we had the option to pass a
renderInPortal
optional prop which would render using React portals.Awesome work so far on this package, I've really been enjoying it 👍