Fix incorrect color value handling in ColorPicker (#10812)

2 files changed, 39 insertions, 15 deletions

diff --git a/server/src/main/java/com/vaadin/ui/AbstractColorPicker.java b/server/src/main/java/com/vaadin/ui/AbstractColorPicker.java
index c2eafbfdc2..8cba9af5df 100644
--- a/server/src/main/java/com/vaadin/ui/AbstractColorPicker.java
+++ b/server/src/main/java/com/vaadin/ui/AbstractColorPicker.java
@@ -88,8 +88,6 @@ public abstract class AbstractColorPicker extends AbstractField<Color> {
         }
     }
 
-    private ColorPickerServerRpc rpc = this::showPopup;
-
     protected static final String STYLENAME_DEFAULT = "v-colorpicker";
     protected static final String STYLENAME_BUTTON = "v-button";
     protected static final String STYLENAME_AREA = "v-colorpicker-area";
@@ -113,6 +111,21 @@ public abstract class AbstractColorPicker extends AbstractField<Color> {
     protected boolean historyVisible = true;
     protected boolean textfieldVisible = true;
 
+    private ColorPickerServerRpc rpc = new ColorPickerServerRpc() {
+        @Override
+        public void openPopup(boolean openPopup) {
+            showPopup(openPopup);
+        }
+
+        @Override
+        public void changeColor(String col) {
+            Color valueC = new Color(
+                    Integer.parseInt(col.substring(1, col.length()), 16));
+            color = valueC;
+            setValue(color,true);
+        }
+    };
+
     /**
      * Instantiates a new color picker.
      */
@@ -170,6 +183,9 @@ public abstract class AbstractColorPicker extends AbstractField<Color> {
     public void setValue(Color color) {
         Objects.requireNonNull(color, "color cannot be null");
         super.setValue(color);
+        if (window != null) {
+            window.setValue(color);
+        }
     }
 
     /**
@@ -446,13 +462,15 @@ public abstract class AbstractColorPicker extends AbstractField<Color> {
 
                 window.addCloseListener(
                         event -> getState().popupVisible = false);
-                window.addValueChangeListener(
-                        event -> setValue(event.getValue()));
-
+                window.addValueChangeListener(event -> {
+                    setValue(event.getValue());
+                    rpc.changeColor(event.getValue().getCSS());
+                });
                 window.getHistory().setValue(color);
                 window.setPositionX(positionX);
                 window.setPositionY(positionY);
                 window.setVisible(true);
+                window.setValue(color);
 
                 parent.addWindow(window);
                 window.focus();
@@ -472,6 +490,7 @@ public abstract class AbstractColorPicker extends AbstractField<Color> {
                 parent.addWindow(window);
                 window.focus();
             }
+            window.setValue(color);
 
         } else if (window != null) {
             window.setVisible(false);
diff --git a/server/src/main/java/com/vaadin/ui/components/colorpicker/ColorPickerPopup.java b/server/src/main/java/com/vaadin/ui/components/colorpicker/ColorPickerPopup.java
index dc2bc920b2..c2ca3d012f 100644
--- a/server/src/main/java/com/vaadin/ui/components/colorpicker/ColorPickerPopup.java
+++ b/server/src/main/java/com/vaadin/ui/components/colorpicker/ColorPickerPopup.java
@@ -28,19 +28,19 @@ import com.vaadin.data.HasValue;
 import com.vaadin.shared.Registration;
 import com.vaadin.shared.ui.MarginInfo;
 import com.vaadin.shared.ui.colorpicker.Color;
-import com.vaadin.ui.AbstractColorPicker.Coordinates2Color;
+import com.vaadin.ui.TabSheet;
+import com.vaadin.ui.Window;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.Slider;
+import com.vaadin.ui.Layout;
 import com.vaadin.ui.Alignment;
 import com.vaadin.ui.Button;
-import com.vaadin.ui.Button.ClickEvent;
-import com.vaadin.ui.Component;
 import com.vaadin.ui.HasComponents;
-import com.vaadin.ui.HorizontalLayout;
-import com.vaadin.ui.Layout;
-import com.vaadin.ui.Slider;
+import com.vaadin.ui.AbstractColorPicker.Coordinates2Color;
+import com.vaadin.ui.Button.ClickEvent;
 import com.vaadin.ui.Slider.ValueOutOfBoundsException;
-import com.vaadin.ui.TabSheet;
-import com.vaadin.ui.VerticalLayout;
-import com.vaadin.ui.Window;
 
 /**
  * A component that represents color selection popup within a color picker.
@@ -160,8 +160,8 @@ public class ColorPickerPopup extends Window implements HasValue<Color> {
      */
     public ColorPickerPopup(Color initialColor) {
         this();
-        selectedColor = initialColor;
         initContents();
+        setValue(initialColor);
     }
 
     private void initContents() {
@@ -248,6 +248,7 @@ public class ColorPickerPopup extends Window implements HasValue<Color> {
         buttons.setComponentAlignment(ok, Alignment.MIDDLE_CENTER);
         buttons.setComponentAlignment(cancel, Alignment.MIDDLE_CENTER);
         layout.addComponent(buttons);
+        setRgbSliderValues(selectedColor);
     }
 
     /**
@@ -451,6 +452,9 @@ public class ColorPickerPopup extends Window implements HasValue<Color> {
 
     private void okButtonClick(ClickEvent event) {
         fireEvent(new ValueChangeEvent<>(this, previouslySelectedColor, true));
+        rgbPreview.setValue(getValue());
+        hsvPreview.setValue(getValue());
+        selPreview.setValue(getValue());
         close();
     }
 
@@ -516,6 +520,7 @@ public class ColorPickerPopup extends Window implements HasValue<Color> {
     }
 
     private void colorChanged(ValueChangeEvent<Color> event) {
+        event.getSource().setValue(event.getValue());
         setValue(event.getValue());
 
         updatingColors = true;