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) => 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): 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;