Fixed color picker closing immediately after the first onChange eve…

…nt, and `onChange` events are now debounced
jensfinnas · Aug 29, 2018 · 321f947 · 321f947
1 parent ed9a6d4
commit 321f947
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 3 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -6,6 +6,8 @@ https://github.com/josdejong/jsoneditor
 ## 2018-08-29, version 5.24.3
 
 - Fixed color picker not working in ES6 projects.
+- Fixed color picker closing immediately after the first `onChange`
+  event, and `onChange` events are now debounced like all text inputs.
 
 
 ## 2018-08-27, version 5.24.2

diff --git a/src/js/Node.js b/src/js/Node.js
@@ -3362,15 +3362,13 @@ Node.prototype._showColorPicker = function () {
     var colorAnchor = createAbsoluteAnchor(this.dom.color, this.editor.frame);
 
     this.editor.options.onColorPicker(colorAnchor, this.value, function onChange(value) {
-      colorAnchor.destroy();
-
       if (typeof value === 'string' && value !== node.value) {
         // force recreating the color block, to cleanup any attached color picker
         node._deleteDomColor();
 
         node.value = value;
         node.updateDom();
-        node._onChangeValue();
+        node._debouncedOnChangeValue();
       }
     });
   }

diff --git a/test/test_color_picker.html b/test/test_color_picker.html
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+
+  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
+  <script src="../dist/jsoneditor.js"></script>
+
+  <style type="text/css">
+    body {
+      font: 10.5pt arial;
+      color: #4d4d4d;
+      line-height: 150%;
+      width: 500px;
+      padding-left: 40px;
+    }
+
+    code {
+      background-color: #f5f5f5;
+    }
+
+    #jsoneditor {
+      width: 500px;
+      height: 500px;
+    }
+  </style>
+</head>
+<body>
+
+<p>
+  Test color picker firing onChange on every change instead of onDone.
+</p>
+
+<form>
+  <div id="jsoneditor"></div>
+</form>
+
+<script>
+  var container, options, json, editor;
+
+  container = document.getElementById('jsoneditor');
+
+  options = {
+    onChangeJSON: function (json) {
+      console.log('onChangeJSON', json);
+    },
+    onColorPicker: function (parent, color, onChange) {
+      new JSONEditor.VanillaPicker({
+        parent: parent,
+        color: color,
+        popup: 'bottom',
+        onChange: function (color) {
+          var alpha = color.rgba[3]
+          var hex = (alpha === 1)
+              ? color.hex.substr(0, 7)  // return #RRGGBB
+              : color.hex               // return #RRGGBBAA
+          onChange(hex)
+        }
+      }).show();
+    }
+  };
+
+  json = {
+    "array": [1, 2, [3,4,5]],
+    "boolean": true,
+    "color": "#82b92c",
+    "htmlcode": '&quot;',
+    "escaped_unicode": '\\u20b9',
+    "unicode": '\u20b9,\uD83D\uDCA9',
+    "return": '\n',
+    "null": null,
+    "number": 123,
+    "object": {"a": "b", "c": "d"},
+    "string": "Hello World",
+    "timestamp": 1534952749890,
+    "url": "http://jsoneditoronline.org"
+  };
+
+  editor = new JSONEditor(container, options, json);
+
+  console.log('json', json);
+  console.log('string', JSON.stringify(json));
+</script>
+</body>
+</html>