Fix hidden pickr instances issues

If the container the pickr is output in is not visible when it is created the position of the movable handles is not shown correctly on opening, this then has the knock-on effect of not setting the color correctly on interaction unless you click on the palette or a swatch first. This change addresses that by ensuring the color is set on the first run of `show` after the picker is made visible. Fixes simonwep#226
bandzoogle · Jul 7, 2020 · 404aac9 · 404aac9
1 parent 9e21242
commit 404aac9
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 8 deletions.
diff --git a/dist/pickr.es5.min.js b/dist/pickr.es5.min.js
diff --git a/dist/pickr.es5.min.js.map b/dist/pickr.es5.min.js.map
diff --git a/dist/pickr.min.js b/dist/pickr.min.js
diff --git a/dist/pickr.min.js.map b/dist/pickr.min.js.map
diff --git a/src/js/pickr.js b/src/js/pickr.js
@@ -143,8 +143,7 @@ class Pickr {
         const that = this;
         requestAnimationFrame((function cb() {
 
-            // TODO: Performance issue due to high call-rate?
-            if (!app.offsetWidth) {
+            if (!app.offsetWidth && app.parentElement !== opt.container) {
                 return requestAnimationFrame(cb);
             }
 
@@ -736,6 +735,11 @@ class Pickr {
 
         if (!this.options.disabled) {
             this._root.app.classList.add('visible');
+            if (!this._ensuredColorSet) {
+                const {h, s, v, a} = this._color;
+                this.setHSVA(h, s, v, a, true);
+                this._ensuredColorSet;
+            }
             this._rePositioningPicker();
             this._emit('show', this);
         }