Modal will close automatically by clicking field on react-bootstrap@0.29.x

Hi @AllenFang, I am creating tables within react-bootstrap Tabs. In the table’s modal that appears for adding a new row, when I click on any field to insert data the modal just disappears, the table also disappears and the app freezes showing the grey layer. At the click on the field in the modal, the Tab’s handleSelect() is called (probably the select event on the modal’s input field bubbles up to the Tab?) as it logs what I believe it is the event object itself.

This is my code:

var ReactBsTable = React.createClass({
    render: function () {
        return (
            <BootstrapTable id="table" ref="table"
                            data={products}
                            insertRow={true}
                            striped={true}
                            hover={true}
                            deleteRow={true}
                            selectRow={selectRowProp}
                            exportCSV={true}
                            csvFileName={'table.csv'}
                            options={optionsObj}
                            >
                <TableHeaderColumn 
                           dataField="id" 
                           isKey={true} 
                           autoValue={true}>Product ID</TableHeaderColumn>
                <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
                <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
            </BootstrapTable>
        );
    }
});

...

var Menu = React.createClass({
    getInitialState: function () {
        return {key: 2};
    },

    handleSelect: function (key) {
        console.dir(key);
        this.setState({key});
    },

    render: function () {
        return (
            <Tabs activeKey={this.state.key} 
                       onSelect={this.handleSelect} 
                       animation={false} >
                <Tab eventKey={1} title="Tab 1" id="tab1">Tab 1 content</Tab>
                <Tab eventKey={2} title="Tab 2" id="tab2">
                    <ReactBsTable />                
                </Tab>
                <Tab eventKey={3} title="Tab 3" id="tab3">Tab 3 content</Tab>
            </Tabs>
        );
    }
});

Do you have any suggestion? I am completely new to react so I apologize if it is just some trivial mistake. Thanks!

[trishfromtisch]

Hi @AllenFang --thanks for this truly awesome library, and for getting back to me! I’ve figured out that setState was being called in an infinite loop in my parent component, which was causing the table to reload, and the modal to disappear.

[AllenFang]

@StefanoGitHub, sorry for lately reply. I’m not sure that react-bootstrap does bundle bootstrap.js(It seems not), I’ll test it in near future. 😃 Thanks 👍