WRQ-32437: Fixed deletion of favorite colors for ColorPicker (#1676)

* fixed deletion of favorite colors for ColorPicker

* save component state when props change

* removed unnecessary code

* added back useEffect

* changed outputText color to be more visible

* added handler for Enter key to edit favorite colors

* code review fix

---------

Co-authored-by: Stanca <stanca.pop@lgepartner.com>

ColorPickerPOC/ColorPickerPOC.js

@@ -66,17 +66,19 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol
 
 	const onPressHandler = useCallback((ev) => {
 		if (editEnabled) return;
-		const target = ev.target.id ? ev.target : ev.target.offsetParent;
-
-		shakeEffectRef.current = setTimeout(() => {
-			target.classList.add(componentsCss.shakeFavoriteColor);
-		}, 300);
-
-		timerRef.current = setTimeout(() => {
-			setEditEnabled(true);
-			setClickEnabled(false);
-			target.classList.remove(componentsCss.shakeFavoriteColor);
-		}, 1000);
+		if (ev.type === 'pointerdown' || (ev.type === 'keydown' && ev.keyCode === 13)) {
+			const target = ev.target.id ? ev.target : ev.target.offsetParent;
+
+			shakeEffectRef.current = setTimeout(() => {
+				target.classList.add(componentsCss.shakeFavoriteColor);
+			}, 300);
+
+			timerRef.current = setTimeout(() => {
+				setEditEnabled(true);
+				setClickEnabled(false);
+				target.classList.remove(componentsCss.shakeFavoriteColor);
+			}, 1000);
+		}
 	}, [editEnabled]);
 
 	const onReleaseHandler = useCallback((ev) => {
@@ -102,8 +104,8 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol
 								key={`${color}_${index + 4}`}
 								minWidth={false}
 								onClick={onSelectFavoriteColor}
-								onMouseDown={onPressHandler}
-								onMouseUp={onReleaseHandler}
+								onKeyDown={onPressHandler}
+								onKeyUp={onReleaseHandler}
 								onPointerDown={onPressHandler}
 								onPointerUp={onReleaseHandler}
 								size="small"
@@ -127,8 +129,8 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol
 								key={`${color}_${index}`}
 								minWidth={false}
 								onClick={onSelectFavoriteColor}
-								onMouseDown={onPressHandler}
-								onMouseUp={onReleaseHandler}
+								onKeyDown={onPressHandler}
+								onKeyUp={onReleaseHandler}
 								onPointerDown={onPressHandler}
 								onPointerUp={onReleaseHandler}
 								size="small"
@@ -177,6 +179,11 @@ const ColorPickerPOCBase = ({color = '#eb4034', colors = [], css, onChangeColor,
 	const [favoriteColors, setFavoriteColors] = useState(colors);
 	const [selectedColor, setSelectedColor] = useState(color);
 
+	useEffect(() => {
+		setFavoriteColors(colors);
+		setSelectedColor(color);
+	}, [color, colors]);
+
 	useEffect(() => {
 		if (selectedColor || favoriteColors) {
 			onChangeColor({selectedColor, favoriteColors});

ColorPickerPOC/ColorPickerSlider.module.less

@@ -15,6 +15,7 @@
 	justify-content: center;
 	align-items: center;
 	background-color: #eeeeee;
+	color: rgb(76, 80, 89);
 	border-radius: 12px;
 	margin-left: 30px;
 }