fix(textfield): change validation message order (#4104)

Co-authored-by: Persijn David Kwekkeboom <pekw01@lillestrom.kommune.no>

Author: poi33

.changeset/yummy-foxes-learn.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Textfield**: Move counter error message before error

packages/react/src/components/textfield/textfield.test.tsx

@@ -127,6 +127,19 @@ describe('Textfield', () => {
 
     expect(screen.getAllByText('1 tegn for mye')[0]).toBeInTheDocument();
   });
+
+  it('Render counter before error validation messages', () => {
+    render({
+      value: 'lorem',
+      label: 'test',
+      counter: 2,
+      error: 'Other invalid condition',
+    });
+
+    const countText = screen.getAllByText('3 tegn for mye')[0];
+    const errorText = screen.getByText('Other invalid condition');
+    expect(countText.compareDocumentPosition(errorText)).toBe(4);
+  });
 });
 
 const render = (

packages/react/src/components/textfield/textfield.tsx

@@ -130,12 +130,12 @@ export const Textfield = forwardRef<
         )}
         {suffix === undefined || <FieldAffix>{suffix}</FieldAffix>}
       </FieldAffixes>
-      {!!error && <ValidationMessage>{error}</ValidationMessage>}
       {!!counter && (
         <Field.Counter
           {...(typeof counter === 'number' ? { limit: counter } : counter)}
         />
       )}
+      {!!error && <ValidationMessage>{error}</ValidationMessage>}
     </Field>
   );
 });