From da77b2249560e5881636e48cba06748865eccae3 Mon Sep 17 00:00:00 2001
From: Diem-Trang Pham <6422507+pdtrang@users.noreply.github.com>
Date: Thu, 20 Nov 2025 16:24:23 -0600
Subject: [PATCH] refactor(client): refactor fill-in-the-blank input change
 handler (#64014)

---
 .../templates/Challenges/components/fill-in-the-blanks.tsx | 7 ++++---
 client/src/templates/Challenges/fill-in-the-blank/show.tsx | 6 ++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/client/src/templates/Challenges/components/fill-in-the-blanks.tsx b/client/src/templates/Challenges/components/fill-in-the-blanks.tsx
index 549a0dead35..a8ce4ae2073 100644
--- a/client/src/templates/Challenges/components/fill-in-the-blanks.tsx
+++ b/client/src/templates/Challenges/components/fill-in-the-blanks.tsx
@@ -13,7 +13,7 @@ type FillInTheBlankProps = {
   showFeedback: boolean;
   feedback: string | null;
   showWrong: boolean;
-  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleInputChange: (inputIndex: number, value: string) => void;
 };
 
 function FillInTheBlanks({
@@ -70,8 +70,9 @@ function FillInTheBlanks({
                     type='text'
                     maxLength={blankAnswers[value].length + 3}
                     className={getInputClass(value)}
-                    onChange={handleInputChange}
-                    data-index={node.value}
+                    onChange={e =>
+                      handleInputChange(node.value, e.target.value)
+                    }
                     size={blankAnswers[value].length}
                     autoComplete='off'
                     aria-label={t('learn.fill-in-the-blank.blank')}
diff --git a/client/src/templates/Challenges/fill-in-the-blank/show.tsx b/client/src/templates/Challenges/fill-in-the-blank/show.tsx
index 453ffa6bed5..e8325a14c99 100644
--- a/client/src/templates/Challenges/fill-in-the-blank/show.tsx
+++ b/client/src/templates/Challenges/fill-in-the-blank/show.tsx
@@ -160,11 +160,9 @@ const ShowFillInTheBlank = ({
     }
   };
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    const inputIndex = parseInt(e.target.getAttribute('data-index') as string);
-
+  const handleInputChange = (inputIndex: number, value: string): void => {
     const newUserAnswers = [...userAnswers];
-    newUserAnswers[inputIndex] = e.target.value;
+    newUserAnswers[inputIndex] = value;
 
     const newAnswersCorrect = [...answersCorrect];
     newAnswersCorrect[inputIndex] = null;