fix(FEC-14262): Player v7 | Quiz | Wrong first element focus on quiz questions overlay.

src/components/quiz-question/multi-choice/multi-choice.tsx

@@ -40,7 +40,7 @@ export const MultiChoice = withText(translates)(
 
     useEffect(() => {
       if (!disabled) {
-        quizQuestionRef.current?.focus();
+        answersOptionsRefMap.get(0)?.focus();
       }
     }, [question]);
 

src/components/quiz-question/open-question/open-question.tsx

@@ -19,6 +19,7 @@ const translates = (): QuizTranslates => {
 export const OpenQuestion = withText(translates)(
   ({question, selected, onSelect, hint, questionIndex, ...otherProps}: QuestionProps & QuizTranslates) => {
     const disabled = !onSelect;
+      const textareaRef = useRef<HTMLTextAreaElement>(null);
 
     const handleChange = useCallback(
       (e: any) => {
@@ -30,7 +31,7 @@ export const OpenQuestion = withText(translates)(
     const quizQuestionRef = useRef<HTMLLegendElement>(null);
     useEffect(() => {
       if (!disabled) {
-        quizQuestionRef.current?.focus();
+        textareaRef.current?.focus();
       }
     }, [question]);
 
@@ -52,6 +53,7 @@ export const OpenQuestion = withText(translates)(
             onChange={handleChange}
             disabled={disabled}
             data-testid="openQuestionAnswerInput"
+            ref={textareaRef}
           />
           <div className={styles.charCounter}>{`${selected.length}/${MAX_LENGTH}`}</div>
         </div>

src/components/quiz-question/quiz-question-wrapper.tsx

@@ -134,7 +134,7 @@ export const QuizQuestionWrapper = withText(translates)((props: QuizQuestionWrap
       case KalturaQuizQuestionTypes.MultiChoice:
         return <MultiChoice {...questionProps} />;
       case KalturaQuizQuestionTypes.Reflection:
-        return <ReflectionPoint {...questionProps} />;
+        return <ReflectionPoint {...questionProps} continueButton={continueButtonRef}/>;
       case KalturaQuizQuestionTypes.OpenQuestion:
         return <OpenQuestion {...questionProps} />;
       case KalturaQuizQuestionTypes.MultiAnswer:

src/components/quiz-question/reflection-point/reflection-point.tsx

@@ -1,22 +1,26 @@
-import {h} from 'preact';
+import {h, RefObject} from 'preact';
 import {useEffect, useRef} from 'preact/hooks';
 import {QuestionProps, QuizTranslates} from '../../../types';
 import * as styles from './reflection-point.scss';
 import {wrapLinksWithTags} from '../../../utils';
 
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 
+interface reflectionPointProps {
+  continueButton: RefObject<HTMLDivElement>;
+}
+
 const translates = (): QuizTranslates => {
   return {
     reflectionPoint: <Text id="ivq.reflection_point">Reflection Point</Text>,
     questionLabel: <Text id="ivq.question">Question</Text>
   };
 };
 
-export const ReflectionPoint = withText(translates)(({question, questionIndex, ...otherProps}: QuestionProps & QuizTranslates) => {
+export const ReflectionPoint = withText(translates)(({question, questionIndex, ...otherProps}: QuestionProps & QuizTranslates & reflectionPointProps) => {
   const quizQuestionRef = useRef<HTMLLegendElement>(null);
   useEffect(() => {
-    quizQuestionRef.current?.focus();
+    otherProps.continueButton.current?.focus();
   }, [question]);
 
   return (

src/components/quiz-question/true-false/true-false.tsx

@@ -27,7 +27,7 @@ export const TrueFalse = withText(translates)(
     const quizQuestionRef = useRef<HTMLLegendElement>(null);
     useEffect(() => {
       if (!disabled) {
-        quizQuestionRef.current?.focus();
+        answersOptionsRefMap.get(0)?.focus();
       }
     }, [question]);