Skip to content

Commit

Permalink
improved focus hack
Browse files Browse the repository at this point in the history
  • Loading branch information
AndyOGo committed Mar 29, 2018
1 parent 7618d08 commit a4628f2
Showing 1 changed file with 29 additions and 8 deletions.
37 changes: 29 additions & 8 deletions src/demos/todomvc/todo-header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,32 +14,53 @@ class Input extends Component {
constructor(props, context) {
super(props, context);

this.onBlur = this.onBlur.bind(this);
this.onChange = this.onChange.bind(this);
this.handleRef = this.handleRef.bind(this);

this.state = {
reFocus: false,
};
}

componentDidUpdate() {
const { props: { editing }, input } = this;
onBlur() {
const { state: { reFocus } } = this;

if (input && !editing) {
input.autofocus = !editing;
if (reFocus === true) {
this.setState({
reFocus: false,
});

setTimeout(() => {
input.focus();
}, 200);
this.input.focus();
}, 10);
}
}

onChange(event) {
const { props: { onChange } } = this;

this.setState({
reFocus: true,
});

onChange(event);
}

handleRef(input) {
this.input = input;
}

render() {
const { props, handleRef } = this;
const { handleRef } = this;
const { onChange, ...props } = this.props;

return (
<input
ref={handleRef}
{...props}
ref={handleRef}
onBlur={this.onBlur}
onChange={this.onChange}
/>
);
}
Expand Down

0 comments on commit a4628f2

Please sign in to comment.