Sidebar: couldn't change the visibility of sidebar component

[thormengkheang]

Bug Report

Steps

Couldn't change the visibility of sidebar component via state visible.

import React, { Component } from "react";
import {
  Button,
  Header,
  Icon,
  Image,
  Menu,
  Segment,
  Sidebar
} from "semantic-ui-react";

export default class SidebarExampleSidebar extends Component {
  state = { visible: false };

  handleSidebarHide = () => this.setState({ visible: false });
  handleSidebarToggle = () =>
    this.setState(prevState => ({ visible: !prevState.visible }));

  render() {
    const { visible } = this.state;
    return (
      <div>
        <Button.Group>
          <Button onClick={this.handleSidebarToggle}>Toggle sidebar</Button>
        </Button.Group>
        <Sidebar.Pushable as={Segment}>
          <Sidebar
            as={Menu}
            animation="overlay"
            icon="labeled"
            inverted
            onHide={this.handleSidebarHide}
            vertical
            visible={visible}
            width="thin"
          >
            <Menu.Item as="a">
              <Icon name="home" />
              Home
            </Menu.Item>
            <Menu.Item as="a">
              <Icon name="gamepad" />
              Games
            </Menu.Item>
            <Menu.Item as="a">
              <Icon name="camera" />
              Channels
            </Menu.Item>
          </Sidebar>

          <Sidebar.Pusher>
            <Segment basic>
              <Header as="h3">Application Content</Header>
              <Image src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
            </Segment>
          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </div>
    );
  }
}

Expected Result

Should close the sidebar when click on toggle sidebar.

Actual Result

Version

^0.88.0

Testcase

https://codesandbox.io/embed/loving-shadow-3btuw

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

Thanks for reporting, fixed in #3772 🚀