Siste finish på React hook forms bugfixing og oppdatering

#deploy-test-frontend

apps/dolly-frontend/src/main/js/src/components/fagsystem/alderspensjon/form/Form.tsx

@@ -270,9 +270,12 @@ export const AlderspensjonForm = () => {
  name={`${alderspensjonPath}.iverksettelsesdato`}
  label="Iverksettelsesdato"
  date={formMethods.getValues(`${alderspensjonPath}.iverksettelsesdato`)}
- handleDateChange={(dato: string) =>
- formMethods.setValue(`${alderspensjonPath}.iverksettelsesdato`, dato)
- }
+ handleDateChange={(dato: string) => {
+ formMethods.setValue(`${alderspensjonPath}.iverksettelsesdato`, dato, {
+ shouldTouch: true,
+ })
+ formMethods.trigger(`${alderspensjonPath}.iverksettelsesdato`)
+ }}
  />
  {!soknad && (
  <FormikSelect

apps/dolly-frontend/src/main/js/src/components/fagsystem/alderspensjon/form/validation.tsx

@@ -16,9 +16,7 @@ export const validation = {
  'Dato må være før iverksettelsesdato.',
  (kravFremsattDato, context) => {
  const iverksettelsesdato: Date = context.parent?.iverksettelsesdato
- return (
- kravFremsattDato && isBefore(kravFremsattDato, new Date(iverksettelsesdato))
- )
+ return kravFremsattDato && isBefore(kravFremsattDato, iverksettelsesdato)
  },
  )
  .nullable(),
@@ -39,7 +37,7 @@ export const validation = {
  'Dato må være etter krav fremsatt.',
  (iverksettelsesdato, context) => {
  const kravFremsattDato: Date = context?.parent?.kravFremsattDato
- return iverksettelsesdato && isAfter(iverksettelsesdato, new Date(kravFremsattDato))
+ return iverksettelsesdato && isAfter(iverksettelsesdato, kravFremsattDato)
  },
  )
  .nullable(),

apps/dolly-frontend/src/main/js/src/components/fagsystem/brregstub/form/partials/organisasjonTextSelect.tsx

@@ -3,6 +3,8 @@ import { OrganisasjonMedMiljoeSelect } from '@/components/organisasjonSelect/Org
 import { useBoolean } from 'react-use'
 import { OrgserviceApi } from '@/service/Api'
 import { OrgInfoAdresse } from '@/service/services/organisasjonservice/types'
+import _ from 'lodash'
+import { useFormContext } from 'react-hook-form'
 
 interface OrgnanisasjonTextSelectProps {
  path: string
@@ -28,19 +30,18 @@ export const OrganisasjonTextSelect = ({
  path,
  aktiveMiljoer,
  setEnhetsinfo,
- clearEnhetsinfo,
 }: OrgnanisasjonTextSelectProps) => {
+ const formMethods = useFormContext()
  const [error, setError] = useState(null)
  const [success, setSuccess] = useBoolean(false)
  const [loading, setLoading] = useBoolean(false)
  const [environment, setEnvironment] = useState(null)
- const [orgnummer, setOrgnummer] = useState(null)
+ const [orgnummer, setOrgnummer] = useState(formMethods.watch(path) || null)
 
  const handleChange = (org: string, miljoe: string) => {
  if (!org || !miljoe) {
  return
  }
- clearEnhetsinfo()
  setError(null)
  setLoading(true)
  setSuccess(false)
@@ -72,8 +73,10 @@ export const OrganisasjonTextSelect = ({
  success={success}
  loading={loading}
  onTextBlur={(event) => {
- setOrgnummer(event.target.value)
- handleChange(event.target.value, environment)
+ if (!_.isEmpty(event?.target?.value)) {
+ setOrgnummer(event.target.value)
+ handleChange(event.target.value, environment)
+ }
  }}
  onMiljoeChange={(event) => {
  setEnvironment(event.value)

apps/dolly-frontend/src/main/js/src/components/fagsystem/brregstub/form/partials/orgnrToggle.tsx

@@ -74,7 +74,7 @@ export const OrgnrToggle = ({
  )}
  {inputType === inputValg.skrivSelv && (
  <OrganisasjonTextSelect
- path={path}
+ path={`${path}.orgNr`}
  aktiveMiljoer={aktiveMiljoer}
  setEnhetsinfo={setEnhetsinfo}
  clearEnhetsinfo={clearEnhetsinfo}

apps/dolly-frontend/src/main/js/src/components/fagsystem/dokarkiv/form/DokarkivForm.tsx

@@ -92,11 +92,13 @@ export const DokarkivForm = () => {
  dokumentVarianter.length > 0
  ? formMethods.setValue('dokarkiv.dokumenter', dokumentVarianter)
  : formMethods.setValue('dokarkiv.dokumenter[0].tittel', skjema.data)
+ formMethods.trigger('dokarkiv.dokumenter')
  }
 
  const handleVedleggChange = (filer: [Vedlegg]) => {
  setFiles(filer)
  formMethods.setValue('dokarkiv.vedlegg', filer)
+ formMethods.trigger('dokarkiv.vedlegg')
  }
 
  const handleSakstypeChange = (target) => {
@@ -105,6 +107,7 @@ export const DokarkivForm = () => {
  formMethods.setValue('dokarkiv.sak.fagsaksystem', '')
  formMethods.setValue('dokarkiv.sak.fagsakId', '')
  }
+ formMethods.trigger('dokarkiv.sak')
  }
 
  const harFagsak = formMethods.watch('dokarkiv.sak.sakstype') === 'FAGSAK'
@@ -148,6 +151,7 @@ export const DokarkivForm = () => {
  'dokarkiv.journalfoerendeEnhet',
  event.target.value === '' ? undefined : event.target.value,
  )
+ formMethods.trigger('dokarkiv.journalfoerendeEnhet')
  }}
  name="dokarkiv.journalfoerendeEnhet"
  label="Journalførende enhet"
@@ -175,7 +179,7 @@ export const DokarkivForm = () => {
  <FormikCheckbox name={`dokarkiv.ferdigstill`} label="Ferdigstill journalpost" />
  {digitalInnsending ? <Digitalinnsending /> : null}
  <Kategori title={'Vedlegg'}>
- <FileUploader files={files} setFiles={setFiles} />
+ <FileUploader filer={files} setFiler={setFiles} />
  {files.length > 0 && (
  <DokumentInfoListe handleChange={handleVedleggChange} filer={files} />
  )}

apps/dolly-frontend/src/main/js/src/components/fagsystem/histark/form/HistarkForm.tsx

@@ -15,7 +15,7 @@ import { Option } from '@/service/SelectOptionsOppslag'
 import { FormikDateTimepicker } from '@/components/ui/form/inputs/timepicker/Timepicker'
 import { FormikTextInput } from '@/components/ui/form/inputs/textInput/TextInput'
 import { Yearpicker } from '@/components/ui/form/inputs/yearpicker/Yearpicker'
-import { testDatoFom } from '@/components/fagsystem/utils'
+import { testDatoFom, testDatoTom } from '@/components/fagsystem/utils'
 import { useFormContext } from 'react-hook-form'
 
 const DokumentInfoListe = React.lazy(
@@ -60,6 +60,8 @@ export const HistarkForm = () => {
  formMethods.setValue(`histark.dokumenter.${index}.antallSider`, 1)
  formMethods.setValue(`histark.dokumenter.${index}.fysiskDokument`, fil.content.base64)
  })
+ formMethods.trigger('histark.dokumenter')
+ formMethods.trigger('histark.vedlegg')
  }
 
  return (
@@ -95,11 +97,13 @@ export const HistarkForm = () => {
  </div>
  <FormikSelect
  name={'navenhet'}
+ fieldName={`${path}.enhetsnavn`}
  value={selectedNavEnhet}
  onChange={(selected: Option) => {
- formMethods.setValue(`${path}.enhetsnummer`, selected.value)
- formMethods.setValue(`${path}.enhetsnavn`, selected.label)
+ formMethods.setValue(`${path}.enhetsnummer`, selected?.value || null)
+ formMethods.setValue(`${path}.enhetsnavn`, selected?.label || null)
  setSelectedNavEnhet(selected?.value)
+ formMethods.trigger(path)
  }}
  label={'NAV-enhet'}
  size={'xlarge'}
@@ -114,7 +118,11 @@ export const HistarkForm = () => {
  handleDateChange={(val) => {
  const time = val ? new Date(val) : null
  setStartAar(time)
- formMethods.setValue(`${path}.startAar`, val ? new Date(val) : null)
+ formMethods.setValue(`${path}.startAar`, val ? new Date(val) : null, {
+ shouldTouch: true,
+ })
+ formMethods.trigger(`${path}.startAar`)
+ formMethods.trigger(`${path}.sluttAar`)
  }}
  maxDate={new Date()}
  />
@@ -126,7 +134,9 @@ export const HistarkForm = () => {
  handleDateChange={(val) => {
  const time = val ? new Date(val) : null
  setSluttAar(time)
- formMethods.setValue(`${path}.sluttAar`, time)
+ formMethods.setValue(`${path}.sluttAar`, time, { shouldTouch: true })
+ formMethods.trigger(`${path}.sluttAar`)
+ formMethods.trigger(`${path}.startAar`)
  }}
  maxDate={new Date()}
  />
@@ -149,7 +159,7 @@ export const HistarkForm = () => {
  size={'xsmall'}
  />
  <Kategori title={'Vedlegg'}>
- <FileUploader files={files} setFiles={setFiles} isMultiple={false} />
+ <FileUploader filer={files} setFiler={setFiles} isMultiple={false} />
  {files.length > 0 && (
  <DokumentInfoListe
  handleChange={handleVedleggChange}
@@ -182,7 +192,11 @@ HistarkForm.validation = {
  skannested: requiredString,
  skanningsTidspunkt: requiredDate.nullable(),
  startAar: testDatoFom(requiredDate.nullable(), 'sluttAar', 'Startår må være før sluttår'),
- sluttAar: requiredDate.nullable(),
+ sluttAar: testDatoTom(
+ requiredDate.nullable(),
+ 'startAar',
+ 'Sluttår må være etter startår',
+ ),
  }),
  ),
  }),

apps/dolly-frontend/src/main/js/src/components/fagsystem/krrstub/form/KrrValidation.tsx

@@ -13,7 +13,7 @@ export const KrrValidation = {
  }),
  sdpAdresse: Yup.string(),
  sdpLeverandoer: Yup.string().nullable(),
- spraak: Yup.string(),
+ spraak: Yup.string().notRequired().nullable(),
  registrert: ifPresent('$krrstub.registrert', requiredBoolean),
  reservert: Yup.boolean().nullable(),
  }),

apps/dolly-frontend/src/main/js/src/components/fagsystem/udistub/form/partials/Arbeidsadgang.tsx

@@ -37,6 +37,7 @@ export const Arbeidsadgang = ({ formMethods }) => {
  })
  formMethods.setValue('udistub.arbeidsadgang.typeArbeidsadgang', null)
  }
+ formMethods.trigger('udistub.arbeidsadgang')
  }
 
  const forklaring = formMethods.watch('udistub.arbeidsadgang.forklaring')

apps/dolly-frontend/src/main/js/src/components/fagsystem/udistub/form/partials/Oppholdsstatus.tsx

@@ -64,6 +64,7 @@ export const Oppholdsstatus = ({ formMethods }: { formMethods: UseFormReturn })
  setEosEllerEFTAtypeOpphold('')
  setTredjelandsBorgereValg('')
  formMethods.setValue(basePath, {})
+ formMethods.clearErrors('udistub.oppholdStatus')
  setPdlInitialValues(formMethods)
  }
 
@@ -105,22 +106,15 @@ export const Oppholdsstatus = ({ formMethods }: { formMethods: UseFormReturn })
  }
  }
 
- const feilmelding = (felt: string) => {
- if (!felt) {
- return { feilmelding: 'Feltet er påkrevd' }
- }
- }
-
  return (
  <div className="flexbox--flex-wrap">
  <DollySelect
- name="oppholdsstatus"
+ name="udistub.oppholdStatus"
  label="Innenfor eller utenfor EØS"
  value={oppholdsstatus}
  size="large"
  options={Options('oppholdsstatus')}
  onChange={(option: Option) => endreOppholdsstatus(option.value)}
- feil={feilmelding(oppholdsstatus)}
  isClearable={false}
  />
  {oppholdsstatus === 'eosEllerEFTAOpphold' && (
@@ -132,7 +126,6 @@ export const Oppholdsstatus = ({ formMethods }: { formMethods: UseFormReturn })
  options={Options('eosEllerEFTAtypeOpphold')}
  onChange={(option: Option) => endreEosEllerEFTAtypeOpphold(option.value)}
  size="xxlarge"
- feil={feilmelding(eosEllerEFTAtypeOpphold)}
  isClearable={false}
  />
  <FormikDatepicker
@@ -173,7 +166,6 @@ export const Oppholdsstatus = ({ formMethods }: { formMethods: UseFormReturn })
  size="xxlarge"
  options={Options('tredjelandsBorgereValg')}
  onChange={(option: Option) => endreTredjelandsBorgereValg(option.value)}
- feil={feilmelding(tredjelandsBorgereValg)}
  isClearable={false}
  />
  {tredjelandsBorgereValg === 'oppholdSammeVilkaar' && (

apps/dolly-frontend/src/main/js/src/components/fagsystem/udistub/form/validation.tsx

@@ -74,7 +74,7 @@ const oppholdStatus = Yup.object()
  .nullable()
  // Sjekker om oppholdStatus er et tomt objekt. Objektet blir satt ved å fylle i feltene
  // 'Oppholdsstatus' og 'Type opphold', men disse er ikke en del av selve formet.
- .test('is-not-empty', (value, context) => {
+ .test('is-not-empty', 'Feltet er påkrevd', (value, context) => {
  const values = context.parent
  if (_.isEmpty(values.oppholdStatus)) {
  return values.harOppholdsTillatelse === false
@@ -88,7 +88,7 @@ export const validation = {
  Yup.object({
  aliaser: ifPresent('$udistub.aliaser', aliaser),
  arbeidsadgang: ifPresent('$udistub.arbeidsadgang', arbeidsadgang),
- flyktning: ifPresent('$udistub.flyktning', requiredBoolean.nullable()),
+ flyktning: requiredBoolean,
  oppholdStatus: ifPresent('$udistub.oppholdStatus', oppholdStatus),
  soeknadOmBeskyttelseUnderBehandling: ifPresent(
  '$udistub.soeknadOmBeskyttelseUnderBehandling',

apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/select/Select.tsx

@@ -20,6 +20,7 @@ type SelectProps = {
  id?: string
  'data-cy'?: string
  name: string
+ fieldName?: string
  value?: any
  className?: any
  classNamePrefix?: string
@@ -132,7 +133,13 @@ export const SelectMedKodeverk = ({ kodeverk, label, isLoading, ...rest }: Selec
 
 export const DollySelect = (props: SelectProps) => (
  <InputWrapper {...props}>
- <Label containerClass="dollyselect" name={props.name} label={props.label} info={props.info}>
+ <Label
+ containerClass="dollyselect"
+ fieldName={props.fieldName}
+ name={props.name}
+ label={props.label}
+ info={props.info}
+ >
  {props.kodeverk ? <SelectMedKodeverk {...props} /> : <Select {...props} />}
  </Label>
  </InputWrapper>
@@ -153,7 +160,6 @@ const P_FormikSelect = ({ feil, ...props }: SelectProps) => {
  : [meta.option.value]
  }
  if (meta.action === 'remove-value') {
- // When removing last value, value is null
  value = selected ? selected.map((v) => v.value) : []
  }
  } else {
@@ -173,7 +179,9 @@ const P_FormikSelect = ({ feil, ...props }: SelectProps) => {
  onBlur={handleBlur}
  feil={
  (errorContext?.showError || isTouched) &&
- (feil || formMethods?.getFieldState(props.name)?.error)
+ (feil ||
+ formMethods?.getFieldState(props.name)?.error ||
+ formMethods?.getFieldState(props.fieldName)?.error)
  }
  {...props}
  />

apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/timepicker/Timepicker.tsx

@@ -69,9 +69,15 @@ const P_FormikTimepicker = ({ ...props }) => {
 
  const handleChange = (date) => {
  const fixedDate = fixTimezone(date)
+ const onChange =
+ props.onChange ||
+ ((event) => {
+ formMethods.setValue(props.name, event?.target?.value, { shouldTouch: true })
+ formMethods.trigger(props.name)
+ })
  if (props.afterChange) props.afterChange(fixedDate)
 
- return props.onChange(SyntEvent(props.name, fixedDate))
+ return onChange(SyntEvent(props.name, fixedDate))
  }
  const handleBlur = () => props?.onBlur?.(SyntEvent(props.name, value))
  return <DollyTimepicker value={value} onChange={handleChange} onBlur={handleBlur} {...props} />