Controlled TextField loosing focus after every character from keyboard - reactjs

Question

Whenever I input a character into the field the focus goes away.
How do I correct that?
"use strict"
import React from "react";
import createReactClass from "create-react-class";
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
export var Config = createReactClass({
setConfig: function() {
localStorage.serverUrl=this.owner.state.serverUrl;
location.reload();
},
setUrl: function(evt) {
this.owner.setState({serverUrl: evt.target.value});
},
render: function() {
var {owner}=this.props;
this.owner=owner;
return <div>
<CardTitle title={__("Server")} />
<CardText>
<TextField id="serverUrl" floatingLabelText={__("Server URL")} value={owner.state.serverUrl} onChange={this.setUrl} />
</CardText>
<CardActions>
<RaisedButton label={__("Apply")} onTouchTap={this.setConfig} />
</CardActions>
</div>;
}
});
There are of course other elements on the root of the application (the actual logic is a bit more complicated, here only the structure):
<MuiThemeProvider muiTheme={muiTheme}>
<div>
<AppBar title={__("Demo")}
iconElementRight={right}
onRightIconButtonClick={this.logon}
onLeftIconButtonClick={this.toggleMenu} />
<Drawer open={this.state.menuOpen}
docked={false}
onLeftIconButtonTouchTap={this.toggleMenu}
onTouchTap={this.toggleMenu}>
<RaisedButton onTouchTap={this.toggleMenu} label={__("Menu")} />
<Menu>
<MenuEntry owner={this} value="/config" title={__("Server")} />
<MenuEntry owner={this} value="/logon" title={__("Logon")} />
<Divider />
<MenuEntry owner={this} value="/about" title={__("About")} />
</Menu>
</Drawer>
<Paper>
<Config owner={this} />
</Paper>
</div>
</MuiThemeProvider>;
Here the implementation MenuEntry
"use strict";
import React from "react";
import createReactClass from "create-react-class";
import MenuItem from 'material-ui/MenuItem';
export var MenuEntry=createReactClass({
onChange: function() {
this.owner.setState({menuOpen: false, systemMenuOpen: false, location: this.value});
},
render: function() {
var {title, owner, value, color}=this.props;
this.owner=owner;
this.value=value;
var selected=(owner.state.location==value);
return <MenuItem checked={selected} onTouchTap={this.onChange} backgroundcolor={color}>
{title}
</MenuItem>;
}
});
Versions:
Material-UI: 0.20
React: 16.2.0
Browser: Chrome 63.0.3239.123 (Mac & Windows & Android)
FF 57.0.4 (Mac & Windows)

Answer 1

As mentionned in material-ui docs about the onChange prop of <TextField> :
Signature: function(event: object, newValue: string) => void
event: Change event targeting the text field.
newValue: The new value of the text field.
So i think you should remove setUrl method and change <TextField> like this (no need to use onBlur) :
<TextField id="serverUrl" floatingLabelText={__("Server URL")} value={owner.state.serverUrl} onChange={(evt, value) => this.owner.setState({ serverUrl: value })} />
More comments about the code :
I'm maybe wrong but calling the setState method of a parent component passed in props seems a bad practice to me, you should consider handling the state of the input in the state of Config component.
Also, you're using create-react-class instead of a class component, it seems useless to use it in your case (you're using es6 import while create-react-class is used to build react app without es6) see official docs for more infos.
Edit : I'm able to reproduce a minimal working example :
Config.js :
import React from 'react';
import createReactClass from 'create-react-class';
import TextField from 'material-ui/TextField';
export var Config = createReactClass({
setUrl: function(evt, value) {
this.owner.setState({ serverUrl: value });
},
render: function() {
var { owner } = this.props;
this.owner = owner;
return (
<div>
<TextField
id="serverUrl"
floatingLabelText={'Server URL'}
value={owner.state.serverUrl}
onChange={this.setUrl}
/>
</div>
);
},
});
index.js :
import React, { Component } from 'react';
import createReactClass from 'create-react-class';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { render } from 'react-dom';
import { Config } from './Config';
var App = createReactClass({
getInitialState: function() {
return { serverUrl: 'test' };
},
render: function() {
console.log(this.state.serverUrl);
return (
<MuiThemeProvider>
<Config owner={this} />
</MuiThemeProvider>
);
},
});
render(<App />, document.querySelector('#root'));

Answer 2

I guess the issue is with Textfield value props and onBlur. The state value that you are passing to value prop is incorrect i.e., value={owner.state.serverUrl} it should be value={this.owner.state.serverUrl}.
The onBlur fuction doesn't exist in your code but you trying to call onBlur={this.onBlur} which should be removed from TextField component. It seems onBlur is not a valid prop to TextField as per material UI docs
<TextField id="serverUrl" floatingLabelText={__("Server URL")} value={this.owner.state.serverUrl} onChange={(evt, value) => this.owner.setState({ serverUrl: value })} />