From 9435392af0389c9853cb0db63e4ea1abd3a572a6 Mon Sep 17 00:00:00 2001
From: Dave Spurr <david.spurr@gmail.com>
Date: Mon, 6 Jul 2020 20:02:07 +0100
Subject: [PATCH] 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 checking if the container is visible via a [offsetParent check](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent) in `_finalBuild` and does not finalize the build until it is by calling `_finalBuild` on `show` calls.
---
 src/js/pickr.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/js/pickr.js b/src/js/pickr.js
index 506bbe54..9e2651e0 100644
--- a/src/js/pickr.js
+++ b/src/js/pickr.js
@@ -193,9 +193,15 @@ class Pickr {
     }
 
     _finalBuild() {
+        if (this._finalBuildComplete) { return; }
+
         const opt = this.options;
         const root = this._root;
 
+        if (opt.container !== document.body && opt.container.offsetParent === null) {
+            return;
+        }
+
         // Remove from body
         opt.container.removeChild(root.root);
 
@@ -235,6 +241,7 @@ class Pickr {
         }
 
         this.hide();
+        this._finalBuildComplete = true;
     }
 
     _buildComponents() {
@@ -732,8 +739,8 @@ class Pickr {
      * Shows the color-picker ui.
      */
     show() {
-
         if (!this.options.disabled) {
+            this._finalBuild();
             this._root.app.classList.add('visible');
             this._rePositioningPicker();
             this._emit('show', this);