fix issues with input focus

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>

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

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

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 === '') {
+      // 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;
     }

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;
   });