From 5852d27d3f11a51474519132e881b13da715e994 Mon Sep 17 00:00:00 2001
From: Julien Giovaresco <dev@giovaresco.fr>
Date: Tue, 27 Oct 2020 08:02:49 +0100
Subject: [PATCH] Fix color picker display when updating an environment color
 (#2711)

Co-authored-by: Opender Singh <opender94@gmail.com>
---
 .../workspace-environments-edit-modal.js      | 41 +++++++++----------
 .../insomnia-app/app/ui/css/layout/base.less  |  4 ++
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/packages/insomnia-app/app/ui/components/modals/workspace-environments-edit-modal.js b/packages/insomnia-app/app/ui/components/modals/workspace-environments-edit-modal.js
index d94f3f806..ab0352dae 100644
--- a/packages/insomnia-app/app/ui/components/modals/workspace-environments-edit-modal.js
+++ b/packages/insomnia-app/app/ui/components/modals/workspace-environments-edit-modal.js
@@ -101,6 +101,7 @@ const SidebarList = SortableContainer(
 @autobind
 class WorkspaceEnvironmentsEditModal extends React.PureComponent<Props, State> {
   environmentEditorRef: ?EnvironmentEditor;
+  environmentColorInputRef: HTMLInputElement;
   colorChangeTimeout: any;
   saveTimeout: any;
   modal: Modal;
@@ -128,6 +129,10 @@ class WorkspaceEnvironmentsEditModal extends React.PureComponent<Props, State> {
     this.environmentEditorRef = n;
   }
 
+  _setInputColorRef(ref: HTMLInputElement | null) {
+    this.environmentColorInputRef = ref;
+  }
+
   _setModalRef(n: Modal | null) {
     this.modal = n;
   }
@@ -329,33 +334,19 @@ class WorkspaceEnvironmentsEditModal extends React.PureComponent<Props, State> {
   }
 
   async _handleClickColorChange(environment: Environment) {
-    let el = document.querySelector('#env-color-picker');
-
-    // Remove existing child so we reset the event handlers. This
-    // was easier than trying to clean them up later.
-    if (el && el.parentNode) {
-      el.parentNode.removeChild(el);
-    }
-
-    el = document.createElement('input');
-    el.id = 'env-color-picker';
-    el.type = 'color';
-    document.body && document.body.appendChild(el);
-
     const color = environment.color || '#7d69cb';
-
     if (!environment.color) {
       await this._handleChangeEnvironmentColor(environment, color);
     }
 
-    el.setAttribute('value', color);
-    el.addEventListener('input', (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        this._handleChangeEnvironmentColor(environment, e.target && e.target.value);
-      }
-    });
+    this.environmentColorInputRef?.click();
+  }
 
-    el.click();
+  _handleInputColorChange(event: SyntheticEvent<HTMLInputElement>) {
+    this._handleChangeEnvironmentColor(
+      this._getActiveEnvironment(),
+      event.target && event.target.value,
+    );
   }
 
   _saveChanges() {
@@ -473,6 +464,14 @@ class WorkspaceEnvironmentsEditModal extends React.PureComponent<Props, State> {
 
               {activeEnvironment && rootEnvironment !== activeEnvironment ? (
                 <React.Fragment>
+                  <input
+                    className="hidden"
+                    type="color"
+                    value={activeEnvironment.color}
+                    ref={this._setInputColorRef}
+                    onInput={this._handleInputColorChange}
+                  />
+
                   <Dropdown className="space-right" right>
                     <DropdownButton className="btn btn--clicky">
                       {activeEnvironment.color && (
diff --git a/packages/insomnia-app/app/ui/css/layout/base.less b/packages/insomnia-app/app/ui/css/layout/base.less
index 883d01b04..d1676f1ae 100644
--- a/packages/insomnia-app/app/ui/css/layout/base.less
+++ b/packages/insomnia-app/app/ui/css/layout/base.less
@@ -501,6 +501,10 @@ blockquote {
   display: none;
 }
 
+.hidden {
+  visibility: hidden;
+}
+
 .relative {
   position: relative;
 }