From 3d2dc8e6996a374a1bf54b3d51dd5189d7f1ea34 Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Sun, 4 Feb 2018 23:16:45 -0500
Subject: [PATCH] fixes for change propagation (conflict between knockout and
 jquery UI autocomplete)

---
 src/public/javascripts/dialogs/attributes.js | 8 ++++++++
 src/views/index.ejs                          | 7 ++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/public/javascripts/dialogs/attributes.js b/src/public/javascripts/dialogs/attributes.js
index e0899fa99..91ca2c849 100644
--- a/src/public/javascripts/dialogs/attributes.js
+++ b/src/public/javascripts/dialogs/attributes.js
@@ -2,6 +2,7 @@
 
 const attributesDialog = (function() {
     const dialogEl = $("#attributes-dialog");
+    const saveAttributesButton = $("#save-attributes-button");
     const attributesModel = new AttributesModel();
     let attributeNames = [];
 
@@ -35,6 +36,11 @@ const attributesDialog = (function() {
         }
 
         this.save = async function() {
+            // we need to defocus from input (in case of enter-triggered save) because value is updated
+            // on blur event (because of conflict with jQuery UI Autocomplete). Without this, input would
+            // stay in focus, blur wouldn't be triggered and change wouldn't be updated in the viewmodel.
+            saveAttributesButton.focus();
+
             if (!isValid()) {
                 alert("Please fix all validation errors and try saving again.");
                 return;
@@ -143,6 +149,8 @@ const attributesDialog = (function() {
         $(this).autocomplete("search", $(this).val());
     });
 
+    $(document).on('blur', '.attribute-name', function (e) { console.log("blur!"); });
+
     $(document).on('focus', '.attribute-value', async function (e) {
         if (!$(this).hasClass("ui-autocomplete-input")) {
             const attributeName = $(this).parent().parent().find('.attribute-name').val();
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 9c81c23ae..863be4c39 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -389,7 +389,7 @@
     <div id="attributes-dialog" title="Note attributes" style="display: none; padding: 20px;">
       <form data-bind="submit: save">
       <div style="text-align: center">
-        <button class="btn-primary btn-large" type="submit">Save</button>
+        <button class="btn-primary btn-large" id="save-attributes-button" type="submit">Save</button>
       </div>
 
       <div style="height: 97%; overflow: auto">
@@ -405,13 +405,14 @@
             <tr>
               <td data-bind="text: attributeId"></td>
               <td>
-                <input type="text" class="attribute-name" data-bind="value: name, event: { change: $parent.attributeChanged }"/>
+                <!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
+                <input type="text" class="attribute-name" data-bind="value: name, valueUpdate: 'blur',  event: { blur: $parent.attributeChanged }"/>
 
                 <div style="color: red" data-bind="if: $parent.isNotUnique($index())">Attribute name must be unique per note.</div>
                 <div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name can't be empty.</div>
               </td>
               <td>
-                <input type="text" class="attribute-value" data-bind="value: value, event: { change: $parent.attributeChanged }" style="width: 300px"/>
+                <input type="text" class="attribute-value" data-bind="value: value, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }" style="width: 300px"/>
               </td>
             </tr>
           </tbody>