When a modal is closed, it's hidden rather than removed

[oddsson]

When a modal is closed, it's hidden rather than removed

When calling ModalController.closeByComponent, the modal window is hidden rather than removed.

Having "leftovers" of a hidden modal window causes issues when using other 3rd party tools, in addition to being a code-smell. In our case, we are using Reakit's menu component when opening a modal window.

Reproduction Steps

1. Setup a project with a menu component from Reakit.
2. One of the menu items should open a modal window with react-modal-global.
3. Open a modal window.
4. Close the modal window.
5. Try to open a modal window again.

Expected Behavior

The menu items should not disappear.

Additional Context

In the following video, you can see better what I mean

Screen.Recording.2024-04-03.at.14.58.47.mov

What happens when using Reakit's menu component

Screen.Recording.2024-04-03.at.15.00.18.mov

I believe this is what's causing this behaviour. Could you please clarify this was added?

Thank you for your time 🙏☺️

[oddsson]

Is this maybe related to #87?

[FrameMuse]

This is intended behavior, the purpose of it to preserve the state and be able to run animation and transitions.

I haven't had problems with this implementation yet, thanks for pointing out!

[FrameMuse]

This behavior won't be changed, but rather given an option to disable it and also it will be changed when new React Offscreen API comes in.

I will work on #87 on the weekend (probably saturday), hopefully this is not too long for you, optionally you could work on this feature yourself and create a PR. I will improve the issue description.

[FrameMuse]

Also @oddsson I'm looking at your video with "Reakit's menu component" and I can't really understand how the behavior of the modal may cause this issue, do you have any ideas?

Can you provide a reproduction example? (https://stackblitz.com/edit/react-modal-global)

[FrameMuse]

Having "leftovers" of a hidden modal window causes issues when using other 3rd party tools, in addition to being a code-smell. In our case, we are using Reakit's menu component when opening a modal window.

From what I saw in Reakit examples - https://reakit.io/docs/menu/
They do exactly the same thing, so I wouldn't be so sure about it being a code-smell.

[oddsson]

Having "leftovers" of a hidden modal window causes issues when using other 3rd party tools, in addition to being a code-smell. In our case, we are using Reakit's menu component when opening a modal window.

From what I saw in Reakit examples - https://reakit.io/docs/menu/ They do exactly the same thing, so I wouldn't be so sure about it being a code-smell.

Yea, you're probably right, this seems to be common practice in React. I apologise if this came off as rude.

[oddsson]

Also @oddsson I'm looking at your video with "Reakit's menu component" and I can't really understand how the behavior of the modal may cause this issue, do you have any ideas?

Can you provide a reproduction example? (https://stackblitz.com/edit/react-modal-global)

Yes! But I wont be able to get around to it until Saturday..

[oddsson]

I tried to reproduce the issue in a CodeSandbox but was unable to do so, i.e. the menu items did not disappear there like they do in our project. This indicates that there's something wrong on our end. Closing this issue, thanks for your time :)

[FrameMuse]

@oddsson Yep, thanks for reaching out, I was pretty that this wasn't related to this package since I'm using it constantly and haven't noticed any conflicts so far.

[dientuki]

Hi! I really really need this feature, how can i help you to make it happen?

[FrameMuse]

@dientuki You can go on and create a PR to show how would you do that, or sketch up an interface.

Recently I also noticed in needing this to be optional...