Merged in fix/loy-514-fix-validation-tracking-in-signup-form (pull request #3445)

fix(LOY-514): Fix validation error tracking in SignupForm

* Fix issue with form submit handling

* Fix

* Remove browser validation

* Add automatic tracking of validatione rrors


Approved-by: Rasmus Langvad
Approved-by: Matilda Landström

packages/design-system/lib/components/Form/Country/CountryCombobox.tsx

@@ -85,7 +85,6 @@ export default function CountryCombobox({
         className={styles.select}
         data-testid={name}
         isDisabled={disabled}
-        isRequired={Boolean(registerOptions?.required)}
         isInvalid={fieldState.invalid}
         name={name}
         onBlur={field.onBlur}

packages/design-system/lib/components/Form/Country/CountrySelect.tsx

@@ -54,7 +54,6 @@ export default function CountrySelect({
         items={items}
         label={label}
         isDisabled={disabled}
-        isRequired={Boolean(registerOptions?.required)}
         isInvalid={fieldState.invalid}
         name={name}
         onBlur={field.onBlur}

packages/design-system/lib/components/Form/Date/index.tsx

@@ -127,7 +127,6 @@ export default function DateSelect({
             label={labels.day}
             name={DateName.day}
             onSelectionChange={(key) => setValue(DateName.day, Number(key))}
-            isRequired
             enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
@@ -142,7 +141,6 @@ export default function DateSelect({
             label={labels.month}
             name={DateName.month}
             onSelectionChange={(key) => setValue(DateName.month, Number(key))}
-            isRequired
             enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
@@ -156,7 +154,6 @@ export default function DateSelect({
             label={labels.year}
             name={DateName.year}
             onSelectionChange={(key) => setValue(DateName.year, Number(key))}
-            isRequired
             enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}

packages/design-system/lib/components/Form/FormInput/index.tsx

@@ -78,7 +78,6 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
               isDisabled={isDisabled}
               isReadOnly={readOnly}
               isInvalid={fieldState.invalid}
-              isRequired={!!registerOptions.required}
             >
               <Input
                 {...props}

packages/design-system/lib/components/Form/FormTextArea/index.tsx

@@ -59,7 +59,6 @@ export const FormTextArea = forwardRef<HTMLTextAreaElement, FormTextAreaProps>(
               isDisabled={isDisabled}
               isReadOnly={readOnly}
               isInvalid={fieldState.invalid}
-              isRequired={!!registerOptions.required}
             >
               <TextArea
                 {...props}

packages/design-system/lib/components/Form/Phone/index.tsx

@@ -131,7 +131,6 @@ export default function Phone({
         aria-label={ariaLabel}
         isDisabled={disabled || registerOptions.disabled}
         isInvalid={fieldState.invalid}
-        isRequired={!!registerOptions?.required}
         name={name}
         type="tel"
         value={phoneNumber}