Reputation: 27849
I'm using Semantic-UI-React in a very simple front end. The 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. 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.
I did my best to drill into the CSS, but I'm still missing it. There's an ancient issue on Github, dealing with similar behavior in semantic-ui itself (i.e. no React involved), but no conclusive solution.
To recreate, just use the code from the Sidebar example, and add a button that opens a Modal in the Pusher
. Once the Modal
is open, the Sidebar
is dead.
I've created a Sandbox sample.
Update: opened a Github issue: https://github.com/Semantic-Org/Semantic-UI-React/issues/4110
Upvotes: 1
Views: 399
Reputation: 1451
Looks like this has been fixed in [email protected] 🎉. See this issue for details.
Upvotes: 1
Reputation: 31
I have the same issue and found a workaround.
First I add a dummy className to the trigger of the Sidebar. Then in the onHide handle I check the target and if it is the class I don't set the state.
<Button size='huge' className="NoClose" icon style={{marginTop: '1em'}}
onClick={this.setVisible}><Icon className="NoClose" name='list' /> Menu</Button>
handleOnHide = (e, data) => {
if(!e.target.classList.contains('NoClose')){
this.setState({ visible: !this.state.visible });
}
}
Hope it can help until a real fix is found
Upvotes: 3