fix(ui5-color-picker): sanitize input by removing '#' from hex value (#12185)

With this change, it is now possible to use a HEX value that contains "#" within it. The "#" symbol is removed from the value in the input field and does not cause an error. This ensures better compatibility and prevents potential issues when entering HEX codes.

fixes: #11417

Author: Todor-ads

packages/main/cypress/specs/ColorPicker.cy.tsx

@@ -65,6 +65,19 @@ describe("Color Picker general interaction tests", () => {
 			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "fafafa");
 	});
 
+	it("should correctly sanitize and parse HEX value to color", () => {
+		cy.mount(<ColorPicker></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput(".ui5-color-picker-hex-input", "#fafafa");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "fafafa");
+	});
+
 	it("should correctly parse short form HEX value to color", () => {
 		cy.mount(<ColorPicker value="#123"></ColorPicker>);
 

packages/main/src/ColorPicker.ts

@@ -328,6 +328,10 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 		const input: Input = (e.target as Input);
 		let inputValueLowerCase = input.value.toLowerCase();
 
+		if (inputValueLowerCase.startsWith("#")) {
+			inputValueLowerCase = inputValueLowerCase.slice(1);
+		}
+
 		// Shorthand Syntax
 		if (inputValueLowerCase.length === 3) {
 			inputValueLowerCase = `${inputValueLowerCase[0]}${inputValueLowerCase[0]}${inputValueLowerCase[1]}${inputValueLowerCase[1]}${inputValueLowerCase[2]}${inputValueLowerCase[2]}`;