fix: handle undefined item in select noEmpty validation and remove ph…

…one input default value (#275)

* fix: add null check to item in select and remove default value from
phone input

* fix: revert test value change

* chore: add unit tests to phone input covering default value

* chore: apply return convention

src/Fields/Phone/index.js

@@ -14,6 +14,7 @@ const Phone = ({
   registerConfig,
   setValue,
   name,
+  defaultValue,
   ...props
 }) => {
   return (
@@ -28,8 +29,8 @@ const Phone = ({
                 registerConfig.required &&
                 !isValidPhoneNumber(phone)
                 ? setError(name, {
-                    type: 'isValidPhoneNumber'
-                  })
+                  type: 'isValidPhoneNumber'
+                })
                 : clearErrors(name)
             }
             shouldSetError()
@@ -41,12 +42,12 @@ const Phone = ({
       name={name}
       render={({ field: { onChange } }) => (
         <PhoneInput
-          defaultValue=''
           onChange={onChange}
           dir='ltr'
           placeholder={placeholder}
           defaultCountry={defaultCountry}
           inputComponent={Input}
+          value={props.value || defaultValue || ''}
           {...props}
         />
       )}

src/Fields/Select/index.js

@@ -144,7 +144,9 @@ const Select = forwardRef(function InnerSelect({
         ...registerConfig,
         validate: {
           noEmpty: (item) =>
-            registerConfig && registerConfig.required ? item.value !== '' : true
+            registerConfig && registerConfig.required
+              ? 'value' in Object(item || null) && item.value !== ''
+              : true
         }
       }}
       name={name}

src/Questions/Phone/__tests__/phone.test.js

@@ -119,3 +119,31 @@ test('country code is visible', () => {
     result.container.querySelector('input[type="tel"]').getAttribute('value')
   ).toBe('+44')
 })
+
+test('default value is displayed', () => {
+  const defaultValue = '555666777'
+  const { getByTestId } = render(
+    <QuestionPhone
+      question={{ ...question, defaultValue }}
+      useForm={formMethods}
+    />
+  )
+  const phoneComponent = getByTestId('question-phone')
+  expect(phoneComponent.getAttribute('value')).toBe(defaultValue)
+})
+
+test('default value can be changed', () => {
+  const defaultValue = '555666777'
+  const changedValue = '777666555'
+  const formatedChangedValue = '+7 776 665 55'
+  const { getByTestId } = render(
+    <QuestionPhone
+      question={{ ...question, defaultValue }}
+      useForm={formMethods}
+    />
+  )
+  const phoneComponent = getByTestId('question-phone')
+  expect(phoneComponent.value).toBe(defaultValue)
+  fireEvent.change(phoneComponent, { target: { value: changedValue } })
+  expect(phoneComponent.value).toBe(formatedChangedValue)
+})

src/Questions/Phone/index.js

@@ -45,6 +45,7 @@ const QuestionPhone = ({ isMobile, isoCode, question, useForm, ...props }) => {
           registerConfig={question.registerConfig}
           name={question.name}
           international={question.international}
+          defaultValue={question.defaultValue}
           {...props}
         />
 

src/builder.js

@@ -46,7 +46,9 @@ const FormBuilder = ({
 }) => {
   const useFormObj = useForm()
   const [formDataValues, setFormDataValues] = useState({})
-  const hasRecaptcha = form.questions.some(question => question.type === 'recaptcha')
+  const hasRecaptcha = form.questions.some(
+    (question) => question.type === 'recaptcha'
+  )
   const recaptchaRef = useRef(null)
 
   useEffect(() => {
@@ -125,10 +127,7 @@ const FormBuilder = ({
       ),
       country_v2: (
         <>
-          <QuestionCountryV2
-            question={question}
-            language={language}
-          />
+          <QuestionCountryV2 question={question} language={language} />
           {question.dependentQuestions &&
             question.dependentQuestions.map(
               ConditionalQuestion(question.dependentQuestions, question.name)
@@ -269,17 +268,17 @@ const FormBuilder = ({
         <React.Fragment key={i}>
           {
             QuestionsMap(dependentQuestion.question)[
-              dependentQuestion.question.type
+            dependentQuestion.question.type
             ]
           }
 
           {nestedQuestion.dependentQuestions
             ? nestedQuestion.dependentQuestions.map(
-                ConditionalQuestion(
-                  nestedQuestion.question,
-                  dependentQuestion.name
-                )
+              ConditionalQuestion(
+                nestedQuestion.question,
+                dependentQuestion.name
               )
+            )
             : null}
         </React.Fragment>
       )
@@ -336,12 +335,14 @@ const FormBuilder = ({
     if (hasRecaptcha) {
       recaptchaRef.current?.execute()
       setFormDataValues(await formatData(data))
-
     } else {
       onSubmitForm(await formatData(data))
     }
   }
 
+  const hasErrors =
+    Object.values(errors).some((error) => error.type === 'required').length > 0
+
   return (
     <FormProvider {...useFormObj}>
       <form
@@ -387,7 +388,7 @@ const FormBuilder = ({
                 <Button
                   sx={styles.fitContent}
                   key={cfa.caption}
-                  disabled={isLoading}
+                  disabled={isLoading || hasErrors || formErrors.length > 0}
                   isLoading={isLoading}
                   id={cfa.id}
                   caption={cfa.caption}