fix(auth): fix default option for required dropdown

jwplayer · Aug 6, 2021 · fab40d5 · fab40d5
1 parent e31a46e
commit fab40d5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -52,15 +52,15 @@ const Dropdown: React.FC<Props & React.AriaAttributes> = ({
         </label>
       )}
       <div className={classNames(styles.dropdown, { [styles.fullWidth]: fullWidth })}>
-        <select id={id} className={styles.select} name={name} value={value} onChange={onChange} {...rest}>
+        <select id={id} className={styles.select} name={name} value={value} onChange={onChange} aria-required={required} {...rest}>
           {defaultLabel && (
-            <option className={classNames(styles.option, optionsStyle)} value="">
+            <option className={classNames(styles.option, optionsStyle)} value="" disabled={required} selected={value === ''}>
               {defaultLabel}
             </option>
           )}
           {options &&
             options.map((option) => (
-              <option className={classNames(styles.option, optionsStyle)} key={option} value={option} aria-required={required}>
+              <option className={classNames(styles.option, optionsStyle)} key={option} value={option} selected={value === option}>
                 {valuePrefix}
                 {option}
               </option>

diff --git a/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -63,7 +63,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
           options={values}
           value={questionValues[key]}
           label={question}
-          defaultLabel={!props.required ? t('personal_details.select_answer') : undefined}
+          defaultLabel={t('personal_details.select_answer')}
           {...props}
           fullWidth
         />

diff --git a/src/containers/AccountModal/forms/PersonalDetails.tsx b/src/containers/AccountModal/forms/PersonalDetails.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { CaptureCustomAnswer, CleengCaptureQuestionField, PersonalDetailsFormData } from 'types/account';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router';
@@ -24,16 +24,20 @@ const PersonalDetails = () => {
   const [questionValues, setQuestionValues] = useState<Record<string, string>>({});
   const [questionErrors, setQuestionErrors] = useState<Record<string, string>>({});
 
-  const fields = data ? Object.fromEntries(data.settings.map((item) => [item.key, item])) : {};
-  const questions = data ? (data.settings.filter((item) => !!(item as CleengCaptureQuestionField).question) as CleengCaptureQuestionField[]) : [];
+  const fields = useMemo(() => Object.fromEntries(data?.settings.map((item) => [item.key, item]) || []), [data]);
+  const questions = useMemo(() => data?.settings.filter((item) => !!(item as CleengCaptureQuestionField).question) as CleengCaptureQuestionField[] || [], [data]);
 
   const nextStep = useCallback(() => {
     history.replace(addQueryParam(history, 'u', accessModel === 'SVOD' ? 'choose-offer' : 'welcome'));
   }, [history, accessModel]);
 
   useEffect(() => {
     if (data && (!data.isCaptureEnabled || !data.shouldCaptureBeDisplayed)) nextStep();
-  }, [data, nextStep]);
+
+    if (data && questions) {
+      setQuestionValues(Object.fromEntries(questions.map(question => [question.key, ''])))
+    }
+  }, [data, nextStep, questions]);
 
   const initialValues: PersonalDetailsFormData = {
     firstName: '',