fix(ui5-color-picker): enable hex value input change on enter (#4621)

Fixes: #4541

Author: unazko

packages/main/src/ColorPicker.hbs

@@ -46,6 +46,7 @@
             <ui5-input
                 class="ui5-color-picker-hex-input"
                 value="{{hex}}"
+                @keydown="{{_onkeydown}}"
                 @ui5-change="{{_handleHEXChange}}"
                 value-state="{{hexInputErrorState}}"
             ></ui5-input>

packages/main/src/ColorPicker.js

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
 import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
@@ -359,6 +360,10 @@ class ColorPicker extends UI5Element {
 			newValue = `${newValue[0]}${newValue[0]}${newValue[1]}${newValue[1]}${newValue[2]}${newValue[2]}`;
 		}
 
+		if (newValue === this.hex) {
+			return;
+		}
+
 		this.hex = newValue;
 		if (newValue.length !== 6 || !hexRegex.test(newValue)) {
 			this._wrongHEX = true;
@@ -450,6 +455,12 @@ class ColorPicker extends UI5Element {
 		}
 	}
 
+	_onkeydown(event) {
+		if (isEnter(event)) {
+			this._handleHEXChange(event);
+		}
+	}
+
 	_calculateColorFromCoordinates(x, y) {
 		// By using the selected coordinates(x = Lightness, y = Saturation) and hue(selected from the hue slider)
 		// and HSL format, the color will be parsed to RGB

packages/main/test/specs/ColorPicker.spec.js

@@ -102,6 +102,26 @@ describe("Color Picker general interaction", () => {
 		assert.strictEqual(await hexInput.getProperty("value"), "808080", "CSS values are parsed correctly");
 	});
 
+	it("Hex value input submit triggers hue value change", async () => {
+		const colorPicker = await browser.$("#change-event");
+		const hexInput = await colorPicker.shadow$(".ui5-color-picker-hex-input");
+		const hueSliderHandle = await colorPicker.shadow$(".ui5-color-picker-hue-slider").shadow$(".ui5-slider-handle");
+
+		await hexInput.doubleClick();
+		await browser.keys("0854a0");
+		await browser.keys("Enter");
+
+		const color = await colorPicker.getAttribute("color");
+
+		await hueSliderHandle.dragAndDrop({ x: 200, y: 0 });
+
+		await hexInput.doubleClick();
+		await browser.keys("0854a0");
+		await browser.keys("Enter");
+
+		assert.strictEqual(await colorPicker.getAttribute("color"), color, "Color is changed to the old color");
+	});
+
 	it("Hue value remains unchanged when user presses over the main color section", async () => {
 		const colorPicker = await browser.$("#change-event");
 		const hexInput = await colorPicker.shadow$(".ui5-color-picker-hex-input");