React Noob - onChange Element Loses Focus - reactjs

Question

I'm trying to create a basic login page that accepts user credentials and submits them to a login api. the problem is that when the onChange event fires, to set the user credentials, the element loses focus. Should I not be updating the credentials with onChange?
import React, {Component, PropTypes} from 'react';
import {Row, Col, FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Button} from 'react-bootstrap';
export default class Login extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {credentials: {username: '', password: ''}};
this.onChange = this.onChange.bind(this);
this.onSave = this.onSave = this.onSave.bind(this);
}
onChange(event) {
const field = event.target.name;
const credentials = this.state.credentials;
credentials[field] = event.target.value;
return this.setState({credentials: credentials});
console.log(event);
}
onSave(event) {
event.preventDefault();
console.log(this.state.credentials);
this.props.actions.logInUser(this.state.credentials);
}
render() {
function FieldGroup({ id, label, help, ...props }) {
return (
<FormGroup controlId={id}>
<ControlLabel>{label}</ControlLabel>
<FormControl {...props} />
{help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>
);
}
const formInstance = (
<Col xs={12} md={8} mdOffset={2}>
<form>
<FieldGroup
name="username"
label="Username"
placeholder="Enter username"
value={this.state.credentials.username}
onChange={this.onChange}
/>
<FieldGroup
name="password"
label="Password"
type="password"
placeholder="Enter password"
value={this.state.credentials.password}
onChange={this.onChange}
/>
<Checkbox checked readOnly>
Checkbox
</Checkbox>
<Button type="submit" onClick={this.onSave}>
Submit
</Button>
</form>
</Col>
);
return formInstance;
}
}
Edit
Working when FieldGroup is moved to separate component, as suggested.
common/FieldGroup.jsx
import React from 'react';
import {FormControl, FormGroup, ControlLabel, HelpBlock} from 'react-bootstrap';
export default class FieldGroup extends React.Component {
constructor(props) {
super(props);
console.log('props');
console.log(props);
this.id = props.name;
this.label = props.label;
this.help = props.placeholder;
}
render() {
return (
<FormGroup controlId={this.props.name}>
<ControlLabel>{this.props.label}</ControlLabel>
<FormControl {...this.props} />
{this.props.help && <HelpBlock>{this.props.help}</HelpBlock>}
</FormGroup>
);
}
}
components/Login.jsx
import React, {Component, PropTypes} from 'react';
import {Col, Checkbox, Button} from 'react-bootstrap';
import FieldGroup from '../common/FieldGroup';
export default class Login extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {credentials: {username: '', password: ''}};
this.onChange = this.onChange.bind(this);
this.onSave = this.onSave = this.onSave.bind(this);
}
onChange(event) {
const field = event.target.name;
const credentials = this.state.credentials;
credentials[field] = event.target.value;
return this.setState({credentials: credentials});
}
onSave(event) {
event.preventDefault();
console.log(this.state.credentials);
this.props.actions.logInUser(this.state.credentials);
}
render() {
return (
<Col xs={12} md={8} mdOffset={2}>
<form>
<FieldGroup
name="username"
label="Username"
placeholder="Enter username"
value={this.state.credentials.username}
onChange={this.onChange}
/>
<FieldGroup
name="password"
label="Password"
type="password"
placeholder="Enter password"
value={this.state.credentials.password}
onChange={this.onChange}
/>
<Checkbox checked readOnly>
Checkbox
</Checkbox>
<Button type="submit" onClick={this.onSave}>
Submit
</Button>
</form>
</Col>
)
}
}

Answer 1

This is an interesting question, as it shows that even though stateless functional components (SFC's) don't have lifecycle methods, they do get unmounted and remounted when they change. This isn't documented all that clearly, but can be seen in the react implementation notes (in the case of SFC's, type is the SFC function itself).
Because FieldGroup is declared inside render, a new function is created on each rendering, which causes the previous SFC component in the virtual dom to unmount and be replaced by a new one. This will happen even when their renderings are exactly the same. As a consequence, any descendent input elements will unmount and remount, losing state and focus in the process.
If you simply call the SFC rather than instantiate it (i.e. {SFC({...sfcProps})} instead of <SFC {...sfcProps}/>, no virtual dom component is created for the SFC itself, and no remounting will occur if the rendering stays the same.
This snippet shows a local SFC, both instantiated and called as a function, as well as a regular top-level SFC. Only the bottom two inputs work correctly.
const SFC = ({rerender}) => <input onChange={rerender}/>
class App extends React.Component {
rerender = () => this.forceUpdate();
render () {
const LocalSFC = ({rerender}) => <input onChange={rerender}/>
return (
<div>
<div>Local SFC (loses state & focus on typing): <LocalSFC rerender={this.rerender}/></div>
<div>Local function application (works fine): {LocalSFC({rerender: this.rerender})}</div>
<div>Regular SFC (works fine): <SFC rerender={this.rerender}/></div>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<body>
<div id="app"></div>
</body>
So to fix the problem, you could replace each <FieldGroup name=.. label=.. ../> by {FieldGroup({name: .., label:.., ..})}, but it makes more sense to do as Jaxx suggested and simply lift FieldGroup out of the Login class to the top-level or a separate file.

Answer 2

Returning inside an onChange function will cause it to lose an element's focus. Remove return from your onChange function.
You do not need to return setState.