panel collapse wont toggle

[sabatsu]

I have react js app with rc-collapse. I think I built it right. I am managing the state of the activeKey with the onChange handler and seems ok. But the panels wont close, they do open onclick but wont close.

renderAccordion(about, videos, gallery) {
    return (
        <Collapse 
            accordion={false}
            onChange={this.onAccordionChange.bind(this)}
            activeKey={this.state.activeKey}
        >
            <Panel header="about" key={'about'} >{about}</Panel>
            <Panel header="gallery" key={'photos'} >{this.renderPhotos(gallery)}</Panel>
            <Panel header="video" key={'video'} >{this.renderVideo(videos)}</Panel>
            <Panel header="contact" key={'contact'} >contact us</Panel>
            <Panel header="share" key={'share'} >
                <a href={`whatsapp://send?text=Take a look at my business card: http://react-js-api.herokuapp.com/${this.props.params.id}`} className="wa_btn wa_btn_s">Share</a>
            </Panel>
        </Collapse>
    );
}

managing the state on panel click:

onAccordionChange(activeKey) {
        this.setState({ activeKey });
    }

initialzing the state:

constructor(props) {
      super(props);

      this.state = { activeKey: [] };
    }

When I console.log the activeKey state I get the correct answer - each click on a panel changes the state from active to not active. But the panel isn't closing.

[shepherdwind]

I have an example code https://github.com/shepherdwind/sample-collapse-1/blob/issue-47/simple.jsx , you can try this demo. I don't find any problem.

[sabatsu]

Thanks. Whats weird is that it tries to close, and goes up for a half of a second and then it really fast re-open again. So I think maybe it is connected to conflict between 2 scripts or css or something. Can I send you a 5 sec video that you will see what I experience?

[shepherdwind]

Ok, a video will be helpful. And also tell me how can I reproduce what you say. Maybe you need change the example code , give me all your code, so I can reproduce it.

[andycloke]

I'm having the same issue as well.

[skylerfenn]

I found that you need to import css from the example here: http://react-component.github.io/collapse/examples/simple.html

I resolved this issue by adding: import 'rc-collapse/assets/index.css';

[FezVrasta]

So, looks like you need to have the .rc-collapse-content-inactive class with display: none, otherwise it will not work.

Ideally this style should be applied by the component using React inline styles.