From a4628f218f80152eeb569226a65ced6c14391f93 Mon Sep 17 00:00:00 2001
From: Andreas Deuschlinger <andreas.deuschlinger@gmail.com>
Date: Thu, 29 Mar 2018 13:07:26 +0200
Subject: [PATCH] improved focus hack

---
 src/demos/todomvc/todo-header.jsx | 37 ++++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/demos/todomvc/todo-header.jsx b/src/demos/todomvc/todo-header.jsx
index 11f41a59a8..37f8fed3ec 100644
--- a/src/demos/todomvc/todo-header.jsx
+++ b/src/demos/todomvc/todo-header.jsx
@@ -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}
       />
     );
   }