Modal kills the Pushable Sidebar

[TravelingTechGuy]

Bug Report

Steps

My main page is using a Sidebar.Pushable to show a menu and the main content. If any of the sub-components opens a Modal, the Sidebar stops reacting. No error - I assume it's something to do with some CSS irrevocably changed at some level.

Expected Result

I expect the sidebar menu to keep appearing on button click, even after a modal has been used

Actual Result

Once a Modal is opened anywhere in the app, the only way to get the Sidebar to be pushable again is to reload the page. 💣

Version

"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.1",

Testcase

https://codesandbox.io/s/crazy-tree-r5m0o

You can show and hide the menu, but once you open the modal, the menu stops responding.

[severingafner]

The prblem is the click event, that gets fired when closing the modal. It somehow triggers the EventListener in the sidebar. if you close the modal without the mouse (e.g. with ESC) the sidebar works

[TravelingTechGuy]

@severingafner Just tried what you recommended: negative results. Closed modal by pressing Escape, Sidebar does not appear.

PS: just tried in the sandbox providedd - still not working.

[layershifter]

The issue is related to React 17, on 16.8 it works as expected: https://codesandbox.io/s/angry-resonance-swbt2?file=/src/App.js

Digging into it 👀

[layershifter]

Was fixed in semantic-ui-react@2.0.3 🎉

[TravelingTechGuy]

Can confirm my code works :)

Upgrading to 2.0.3 in the sandbox testcase works as well: https://codesandbox.io/s/wispy-firefly-hg1eg