WRQ-32437: Fixed deletion of favorite colors for ColorPicker

ColorPickerPOC/ColorPickerPOC.js

@@ -17,6 +17,7 @@
 import {generateOppositeColor} from './utils';
 
 import componentsCss from './ColorPickerPOC.module.less';
+import Spotlight, {getDirection} from "../../enact/packages/spotlight";
 
 const SpottableButton = Spottable(ButtonBase);
 
@@ -90,6 +91,35 @@
 		}, 100);
 	}, []);
 
+	const handleKeyDown = useCallback((ev) => {
+		if(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 handleKeyUp = useCallback((ev) => {
+		if(ev.keyCode === 13) {
+			const target = ev.target.id ? ev.target : ev.target.offsetParent;
+			target.classList.remove(componentsCss.shakeFavoriteColor);
+
+			clearTimeout(shakeEffectRef.current);
+			clearTimeout(timerRef.current);
+			setTimeout(() => {
+				setClickEnabled(true);
+			}, 100);
+		}
+	}, []);
+
 	return (
 		<div>
 			<Row className={componentsCss.favoriteColorsRow}>
@@ -102,8 +132,8 @@
 								key={`${color}_${index + 4}`}
 								minWidth={false}
 								onClick={onSelectFavoriteColor}
-								onMouseDown={onPressHandler}
-								onMouseUp={onReleaseHandler}
+								onKeyDown={handleKeyDown}
+								onKeyUp={handleKeyUp}
 								onPointerDown={onPressHandler}
 								onPointerUp={onReleaseHandler}
 								size="small"
@@ -127,8 +157,8 @@
 								key={`${color}_${index}`}
 								minWidth={false}
 								onClick={onSelectFavoriteColor}
-								onMouseDown={onPressHandler}
-								onMouseUp={onReleaseHandler}
+								onKeyDown={handleKeyDown}
+								onKeyUp={handleKeyUp}
 								onPointerDown={onPressHandler}
 								onPointerUp={onReleaseHandler}
 								size="small"
@@ -177,6 +207,11 @@
 	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;
 }