Disable button on submit (#782)

navikt · Dec 5, 2024 · f558333 · f558333
1 parent 1114126
commit f558333
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/components/Form/OppfolgingStep/OnskerOppfolgingStep.tsx b/src/components/Form/OppfolgingStep/OnskerOppfolgingStep.tsx
@@ -7,6 +7,7 @@ import { Step } from '@/components/Step/Step'
 
 interface Props {
   goToPreviousStep: () => void
+  isSubmitting: boolean
 }
 
 const Description = (): ReactElement => {
@@ -21,7 +22,7 @@ const Description = (): ReactElement => {
   )
 }
 
-export const OnskerOppfolgingStep = ({ goToPreviousStep }: Props): ReactElement => {
+export const OnskerOppfolgingStep = ({ goToPreviousStep, isSubmitting }: Props): ReactElement => {
   useEffect(() => {
     window.scrollTo(0, 0)
   }, [])
@@ -32,6 +33,7 @@ export const OnskerOppfolgingStep = ({ goToPreviousStep }: Props): ReactElement
       goToPreviousStep={goToPreviousStep}
       customNextButtonIcon={<PaperplaneIcon aria-hidden />}
       customNextButtonLabel="Send inn svarene"
+      isSubmitting={isSubmitting}
     >
       <RadioGroupForQuestion questionName="BEHOV_FOR_OPPFOLGING" description={<Description />} />
     </Step>

diff --git a/src/components/Form/StepHandler.tsx b/src/components/Form/StepHandler.tsx
@@ -124,7 +124,7 @@ export const StepHandler = ({ senOppfolgingStatus }: LandingContentProps): React
               case 'INFO':
                 return <InfoStep goToPreviousStep={goToPreviousStep} />
               case 'KONTAKT':
-                return <OnskerOppfolgingStep goToPreviousStep={goToPreviousStep} />
+                return <OnskerOppfolgingStep goToPreviousStep={goToPreviousStep} isSubmitting={mutation.isLoading} />
               default:
                 return null
             }

diff --git a/src/components/Step/Step.tsx b/src/components/Step/Step.tsx
@@ -8,6 +8,7 @@ interface Props {
   goToPreviousStep?: () => void
   customNextButtonLabel?: string
   customNextButtonIcon?: ReactNode
+  isSubmitting?: boolean
 }
 
 export const Step = ({
@@ -16,6 +17,7 @@ export const Step = ({
   goToPreviousStep,
   customNextButtonLabel,
   customNextButtonIcon,
+  isSubmitting = false,
 }: Props): ReactElement => {
   return (
     <>
@@ -36,7 +38,12 @@ export const Step = ({
               Tilbake
             </Button>
           )}
-          <Button type="submit" icon={customNextButtonIcon ?? <ArrowRightIcon aria-hidden />} iconPosition="right">
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            icon={customNextButtonIcon ?? <ArrowRightIcon aria-hidden />}
+            iconPosition="right"
+          >
             {customNextButtonLabel ?? 'Neste'}
           </Button>
         </HStack>