1 files changed, 20 insertions, 2 deletions

diff --git a/app/assets/javascripts/labels/create_label_dropdown.js b/app/assets/javascripts/labels/create_label_dropdown.js
index 033ca9dd3ea..60ab0c92256 100644
--- a/app/assets/javascripts/labels/create_label_dropdown.js
+++ b/app/assets/javascripts/labels/create_label_dropdown.js
@@ -37,6 +37,8 @@ export default class CreateLabelDropdown {
     // eslint-disable-next-line @gitlab/no-global-event-off
     this.$newColorField.off('keyup change');
     // eslint-disable-next-line @gitlab/no-global-event-off
+    this.$colorPreview.off('keyup change');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.$dropdownBack.off('click');
     // eslint-disable-next-line @gitlab/no-global-event-off
     this.$cancelButton.off('click');
@@ -54,6 +56,10 @@ export default class CreateLabelDropdown {
 
     this.$newLabelField.on('keyup change', this.enableLabelCreateButton.bind(this));
     this.$newColorField.on('keyup change', this.enableLabelCreateButton.bind(this));
+    this.$colorPreview.on('keyup change', this.enableLabelCreateButton.bind(this));
+
+    this.$newColorField.on('input', this.updateColorPreview.bind(this));
+    this.$colorPreview.on('input', this.updateColorPickerPreview.bind(this));
 
     this.$dropdownBack.on('click', this.resetForm.bind(this));
 
@@ -73,7 +79,19 @@ export default class CreateLabelDropdown {
     e.stopPropagation();
 
     this.$newColorField.val($this.data('color')).trigger('change');
-    this.$colorPreview.css('background-color', $this.data('color')).parent().addClass('is-active');
+    this.$colorPreview.val($this.data('color')).trigger('change');
+  }
+
+  updateColorPreview() {
+    const previewColor = this.$newColorField.val();
+    return this.$colorPreview.val(previewColor);
+    // Updates the preview color with the hex-color input
+  }
+
+  updateColorPickerPreview() {
+    const previewColor = this.$colorPreview.val();
+    return this.$newColorField.val(previewColor);
+    // Updates the input color with the hex-color from the picker
   }
 
   enableLabelCreateButton() {
@@ -92,7 +110,7 @@ export default class CreateLabelDropdown {
 
     this.$addList.prop('checked', this.addListDefault);
 
-    this.$colorPreview.css('background-color', '').parent().removeClass('is-active');
+    this.$colorPreview.val('');
   }
 
   saveLabel(e) {