Fix inputboks overflow (#519)

* Fix inputboks overflow * Cleanup
navikt · Nov 30, 2023 · dc563b1 · dc563b1
1 parent cc7da9c
commit dc563b1
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 97 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -60,10 +60,10 @@
   "dependencies": {
     "@amplitude/analytics-browser": "^2.3.2",
     "@hookform/resolvers": "^3.3.1",
-    "@navikt/aksel-icons": "^5.5.0",
-    "@navikt/ds-css": "^5.5.0",
-    "@navikt/ds-react": "^5.5.0",
-    "@navikt/ds-tailwind": "^5.5.0",
+    "@navikt/aksel-icons": "^5.11.3",
+    "@navikt/ds-css": "^5.11.3",
+    "@navikt/ds-react": "^5.11.3",
+    "@navikt/ds-tailwind": "^5.11.3",
     "@vitejs/plugin-react-swc": "^3.3.1",
     "core-js": "^3.32.2",
     "date-fns": "^2.30.0",

diff --git a/src/view/dialog/meldingInput/MeldingSideInput.tsx b/src/view/dialog/meldingInput/MeldingSideInput.tsx
@@ -1,6 +1,4 @@
-import classNames from 'classnames';
-import TextareaAutosize from '@navikt/ds-react/esm/util/TextareaAutoSize';
-import { Alert, Button, ErrorMessage } from '@navikt/ds-react';
+import { Alert, Button, Textarea } from '@navikt/ds-react';
 import React, { MutableRefObject, useContext, useRef } from 'react';
 import { useCompactMode } from '../../../featureToggle/FeatureToggleProvider';
 import { useFormContext } from 'react-hook-form';
@@ -26,17 +24,17 @@ const MeldingSideInputInner = () => {
     const formHooks = register('melding');
     return (
         <form className="flex flex-1 flex-col overflow-hidden" onSubmit={onSubmit} noValidate autoComplete="off">
-            <div className={'overflow-hidden p-1 flex flex-col'}>
-                <label htmlFor="melding_input" className="hidden ">
-                    Skriv om arbeid og oppfølging
-                </label>
-                <TextareaAutosize
+            <div className={'overflow-hidden  flex flex-col'}>
+                <Textarea
+                    label="Skriv om arbeid og oppfølging"
+                    hideLabel
                     id="melding_input"
-                    className={classNames(
-                        'w-full grow border-2 border-gray-500 focus:border-blue-500 rounded-md p-2 overflow-auto outline-0',
-                        { 'border-red-300': errors.melding }
-                    )}
-                    style={{ overflow: 'auto' }}
+                    error={
+                        errors.melding ? (
+                            <div>{betterErrorMessage(errors.melding, getValues('melding')).message}</div>
+                        ) : null
+                    }
+                    className="overflow-auto"
                     {...formHooks}
                     ref={(ref) => {
                         textAreaRef.current = ref;
@@ -53,11 +51,7 @@ const MeldingSideInputInner = () => {
                     <KladdLagret />
                 </div>
             </div>
-            {errors.melding ? (
-                <ErrorMessage className="mt-2" size="small">
-                    {betterErrorMessage(errors.melding, getValues('melding')).message}
-                </ErrorMessage>
-            ) : null}
+
             {noeFeilet ? (
                 <Alert className="mt-4" variant="error">
                     Noe gikk dessverre galt med systemet. Prøv igjen senere.