CODEWITHSUNDEEP
reactjsmodal-dialogsemantic-uisidebarsemantic-ui-react
Traveling Tech Guy
Traveling Tech Guy

Reputation: 27849

Semantic-UI Modal blows my Pushable Sidebar

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

Answers (2)

pbatey
pbatey

Reputation: 1451

Looks like this has been fixed in [email protected] 🎉. See this issue for details.

Upvotes: 1

Maxence Fiorina
Maxence Fiorina

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

Related Questions