From 9a27e850e15fddfe0e9504660f516d51d31e5284 Mon Sep 17 00:00:00 2001
From: Morris Brodersen <mb@morrisbrodersen.de>
Date: Thu, 22 Oct 2020 14:19:58 +0200
Subject: [PATCH] fix issues with input focus

---
 public/index.html                |  2 +-
 public/scripts/TodoApp.js        | 11 +++++++++++
 public/scripts/TodoCustomList.js |  6 +++++-
 public/scripts/TodoItem.js       | 24 +++++++++++++++++-------
 public/scripts/TodoItemInput.js  |  4 +++-
 5 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/public/index.html b/public/index.html
index ae0633c..fadb84c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,7 +26,7 @@
 
     <script
       nomodule
-      src="https://polyfill.io/v3/polyfill.min.js?features=Set%2CMap%2CObject.assign%2Cfetch%2CrequestAnimationFrame%2CNodeList.prototype.forEach%2CElement.prototype.classList%2Cperformance.now"
+      src="https://polyfill.io/v3/polyfill.min.js?features=Set%2CMap%2CObject.assign%2Cfetch%2CrequestAnimationFrame%2CNodeList.prototype.forEach%2CElement.prototype.classList%2Cperformance.now%2cNode.prototype.contains"
     ></script>
     <script src="scripts/AppCollapsible.js"></script>
     <script src="scripts/AppDraggable.js"></script>
diff --git a/public/scripts/TodoApp.js b/public/scripts/TodoApp.js
index 15f4db5..946995b 100644
--- a/public/scripts/TodoApp.js
+++ b/public/scripts/TodoApp.js
@@ -71,6 +71,17 @@ VT.TodoApp = function (el) {
     e.detail.placeholder.classList.add('_noflip');
   });
 
+  // dispatch "focusOther" .use-focus-other inputs if they are not active
+  // ensures only one edit input is active
+  el.addEventListener('focusin', function (e) {
+    if (!e.target.classList.contains('use-focus-other')) return;
+
+    document.querySelectorAll('.use-focus-other').forEach(function (el) {
+      if (el === e.target) return;
+      el.dispatchEvent(new CustomEvent('focusOther'));
+    });
+  });
+
   // listen to the TodoStore's data
   // this is the main update
   // everything else is related to drag & drop or FLIP animations
diff --git a/public/scripts/TodoCustomList.js b/public/scripts/TodoCustomList.js
index 4a4a146..047593b 100644
--- a/public/scripts/TodoCustomList.js
+++ b/public/scripts/TodoCustomList.js
@@ -13,7 +13,7 @@ VT.TodoCustomList = function (el) {
     '<div class="header">',
     '  <h3 class="title"></h3>',
     '  <p class="form">',
-    '    <input type="text" class="input">',
+    '    <input type="text" class="input use-focus-other">',
     '    <button class="app-button delete"><i class="app-icon" data-id="trashcan-16"></i></button>',
     '  </p>',
     '</div>',
@@ -48,6 +48,10 @@ VT.TodoCustomList = function (el) {
     saveOnBlur = true;
   });
 
+  inputEl.addEventListener('focusOther', function () {
+    if (state.editing) save();
+  });
+
   inputEl.addEventListener('keyup', function (e) {
     switch (e.keyCode) {
       case 13: // enter
diff --git a/public/scripts/TodoItem.js b/public/scripts/TodoItem.js
index 51fb852..e15e722 100644
--- a/public/scripts/TodoItem.js
+++ b/public/scripts/TodoItem.js
@@ -15,7 +15,7 @@ VT.TodoItem = function (el) {
     '</div>',
     '<p class="label"></p>',
     '<p class="form">',
-    '  <input class="input" type="text">',
+    '  <input type="text" class="input use-focus-other">',
     '  <button class="app-button save"><i class="app-icon" data-id="check-16"></i></button>',
     '</p>',
   ].join('\n');
@@ -74,6 +74,10 @@ VT.TodoItem = function (el) {
     saveOnBlur = true;
   });
 
+  inputEl.addEventListener('focusOther', function () {
+    if (state.editing) save();
+  });
+
   saveEl.addEventListener('mousedown', function () {
     saveOnBlur = false;
   });
@@ -93,12 +97,18 @@ VT.TodoItem = function (el) {
     var label = inputEl.value.trim();
 
     if (label === '') {
-      el.dispatchEvent(
-        new CustomEvent('deleteItem', {
-          detail: state.item,
-          bubbles: true,
-        })
-      );
+      // deferred deletion prevents a bug at reconciliation in TodoList:
+      //   Failed to execute 'removeChild' on 'Node': The node to be removed is
+      //   no longer a child of this node. Perhaps it was moved in a 'blur'
+      //   event handler?
+      requestAnimationFrame(function () {
+        el.dispatchEvent(
+          new CustomEvent('deleteItem', {
+            detail: state.item,
+            bubbles: true,
+          })
+        );
+      });
 
       return;
     }
diff --git a/public/scripts/TodoItemInput.js b/public/scripts/TodoItemInput.js
index 5831bb0..f28fbdb 100644
--- a/public/scripts/TodoItemInput.js
+++ b/public/scripts/TodoItemInput.js
@@ -5,7 +5,7 @@ VT.TodoItemInput = function (el) {
   var saveOnBlur = true;
 
   el.innerHTML = [
-    '<input class="input" type="text">',
+    '<input type="text" class="input use-focus-other">',
     '<button class="app-button save"><i class="app-icon" data-id="plus-24"></i></button>',
   ].join('\n');
 
@@ -30,6 +30,8 @@ VT.TodoItemInput = function (el) {
     saveOnBlur = true;
   });
 
+  inputEl.addEventListener('focusOther', save);
+
   saveEl.addEventListener('mousedown', function () {
     saveOnBlur = false;
   });