fix(SW-1509): fix default selected key by using initial parsed user values and not the re-rendered ones

apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx

@@ -22,13 +22,13 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
   const lang = useLang()
 
   const { control, setValue, formState, watch } = useFormContext()
-  const { field, fieldState } = useController({
+  const { field } = useController({
     control,
     name,
     rules: registerOptions,
   })
 
-  const currentDateValue = useWatch({ name })
+  const currentDateValue: string = useWatch({ name })
   const year = watch(DateName.year)
   const month = watch(DateName.month)
   const day = watch(DateName.day)
@@ -61,16 +61,6 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
     label: `${day}`,
   }))
 
-  const dayLabel = intl.formatMessage({
-    defaultMessage: "Day",
-  })
-  const monthLabel = intl.formatMessage({
-    defaultMessage: "Month",
-  })
-  const yearLabel = intl.formatMessage({
-    defaultMessage: "Year",
-  })
-
   useEffect(() => {
     if (formState.isSubmitting) return
 
@@ -130,35 +120,40 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
         <div className={styles.segment}>
           <Select
             items={days}
-            label={dayLabel}
+            label={intl.formatMessage({
+              defaultMessage: "Day",
+            })}
             name={DateName.day}
             onSelectionChange={(key) => setValue(DateName.day, Number(key))}
-            isInvalid={fieldState.invalid}
             isRequired
             enableFiltering
-            defaultSelectedKey={day}
+            defaultSelectedKey={dateValue?.day}
           />
         </div>
         <div className={styles.segment}>
           <Select
             items={months}
-            label={monthLabel}
+            label={intl.formatMessage({
+              defaultMessage: "Month",
+            })}
             name={DateName.month}
             onSelectionChange={(key) => setValue(DateName.month, Number(key))}
             isRequired
             enableFiltering
-            defaultSelectedKey={month}
+            defaultSelectedKey={dateValue?.month}
           />
         </div>
         <div className={styles.segment}>
           <Select
             items={years}
-            label={yearLabel}
+            label={intl.formatMessage({
+              defaultMessage: "Year",
+            })}
             name={DateName.year}
             onSelectionChange={(key) => setValue(DateName.year, Number(key))}
             isRequired
             enableFiltering
-            defaultSelectedKey={year}
+            defaultSelectedKey={dateValue?.year}
           />
         </div>
       </div>