From cdfb9acff7c8c75cee69df6e4944d64b8d3d8b24 Mon Sep 17 00:00:00 2001
From: Anders Rognstad <anders.rognstad@nav.no>
Date: Thu, 28 Nov 2024 13:10:31 +0100
Subject: [PATCH] Move error messages to avoid funky button

---
 src/components/sokperson/SokPerson.tsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/sokperson/SokPerson.tsx b/src/components/sokperson/SokPerson.tsx
index aa5725b2..8a5c55d5 100644
--- a/src/components/sokperson/SokPerson.tsx
+++ b/src/components/sokperson/SokPerson.tsx
@@ -4,6 +4,7 @@ import {
   BodyShort,
   Box,
   Button,
+  ErrorMessage,
   Heading,
   HStack,
   TextField,
@@ -66,6 +67,9 @@ export default function SokPerson() {
     }
   };
 
+  const invalidInitials = isFormError && !validInitials(nameInitials);
+  const invalidBirthdate = isFormError && parseBirthdate(birthdate) === null;
+
   return (
     <>
       <Box background="surface-default" padding="4">
@@ -81,11 +85,7 @@ export default function SokPerson() {
               htmlSize={10}
               type="text"
               onChange={(e) => setNameInitials(e.target.value)}
-              error={
-                isFormError && !validInitials(nameInitials)
-                  ? texts.validation.initials
-                  : undefined
-              }
+              error={invalidInitials}
             />
             <TextField
               label="Fødselsdato"
@@ -93,11 +93,7 @@ export default function SokPerson() {
               htmlSize={14}
               type="text"
               onChange={(e) => setBirthdate(e.target.value)}
-              error={
-                isFormError && parseBirthdate(birthdate) === null
-                  ? texts.validation.birthdate
-                  : undefined
-              }
+              error={invalidBirthdate}
             />
             <Button
               onClick={handleSubmit}
@@ -108,6 +104,16 @@ export default function SokPerson() {
               Søk
             </Button>
           </HStack>
+          {invalidInitials && (
+            <ErrorMessage size="small">
+              {texts.validation.initials}
+            </ErrorMessage>
+          )}
+          {invalidBirthdate && (
+            <ErrorMessage size="small">
+              {texts.validation.birthdate}
+            </ErrorMessage>
+          )}
           {isError && (
             <Alert variant="error" size="small">
               {texts.error}