Ad

Material-ui: Input Alters The Tabs' This.state.value

- 1 answer

I am using Material-UI for a React app. I am using the controllable Tabs and Tab components. In the recommended setup, this.state.value is used to determine which tab is open. When I enter text in an input field inside a tab, it alters this.state.value to a SyntheticEvent. This happens even if the input box is in a separate component. As a result, the current tab gets closed. I would like to prevent the input text from closing the current tab. Suggestions please?

var React = require('react');
var Tabs = require('material-ui/lib/tabs/tabs');
var Tab = require('material-ui/lib/tabs/tab');

module.exports = React.createClass({
    getInitialState() {
        return {
            value: 'newGoal'
        };
    },
    handleChange(value) {
        this.setState({
            value: value
        });
    },
    render() {
        console.log("this.state.value at TABS:", this.state.value);
        return (
            <Tabs
                value={this.state.value}
                onChange={this.handleChange}
            >
                <Tab label="New Goal" value="newGoal" >
                    <input></input>
                </Tab>
                <Tab label="Existing Goal" value="existingGoal">
                </Tab>
            </Tabs>
        )
    }
});
Ad

Answer

You were hit by this issue. One easy way to fix it is to do a type check in handleChange like -

handleChange(value) {
    if (typeof value != "string"){
        return;
    }
    this.setState({
        value: value
    });
},
Ad
source: stackoverflow.com
Ad