From 31d2eebaf2437b09d57292b52a5fcdfbd8bd9109 Mon Sep 17 00:00:00 2001
From: Ryan Yang <ryanqyang@gmail.com>
Date: Sun, 5 May 2024 13:41:22 -0700
Subject: [PATCH] Suuper strange edge case. Chrome on Android doesn't allow
 this standard keypress so need a hack around it.

---
 .../HexColorInput/HexColorInput.jsx           | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/app/pages/ColorGame/components/HexColorInput/HexColorInput.jsx b/src/app/pages/ColorGame/components/HexColorInput/HexColorInput.jsx
index e50ec93d..b5d7705f 100644
--- a/src/app/pages/ColorGame/components/HexColorInput/HexColorInput.jsx
+++ b/src/app/pages/ColorGame/components/HexColorInput/HexColorInput.jsx
@@ -58,9 +58,26 @@ export const HexColorInput = memo(function HexColorInput({
 		focusEndOfInput(input[0].current);
 	};
 
-	const handleChange = (index) => (event) => {
-		const userKeyInput = event.key.toUpperCase();
+	const handleInput = (index) => (event) => {
+		const userKeyInput = event.nativeEvent.data.toUpperCase();
+
+		if (!DIGITS.includes(userKeyInput)) return;
+
+		setGuess((prev) => {
+			const next = [...prev];
+			next[index] = userKeyInput;
+			return next;
+		});
+
+		if (index > 4) return;
+		focusEndOfInput(input[index + 1].current);
+	};
 
+	const handleChange = (index) => (event) => {
+		if (event.keyCode === 229) {
+			// really strange use case where chrome on android doesn't allow this method of input
+			return;
+		}
 		switch (event.key) {
 			case "Backspace":
 				if (index > 0 && !guess[index].length) {
@@ -84,18 +101,11 @@ export const HexColorInput = memo(function HexColorInput({
 				return;
 
 			default:
-				if (!DIGITS.includes(userKeyInput)) return;
-
-				setGuess((prev) => {
-					const next = [...prev];
-					next[index] = userKeyInput;
-					return next;
-				});
-
-				if (index > 4) return;
-				focusEndOfInput(input[index + 1].current);
+				// handle actual text input with the oninput handler
+				return;
 		}
 	};
+
 	return (
 		<form className={cn.container} onSubmit={handleSubmit}>
 			<div className={cn.input}>
@@ -108,6 +118,7 @@ export const HexColorInput = memo(function HexColorInput({
 				/>
 				{guess.map((digit, index) => (
 					<input
+						onInput={handleInput(index)}
 						key={index}
 						ref={input[index]}
 						type="text"