Fixed expandable textarea and moved textarea to app-components

src/app-components/TextArea/TextArea.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { Textarea } from '@digdir/designsystemet-react';
+import type { CharacterLimitProps } from '@digdir/designsystemet-react/dist/types/components/form/CharacterCounter';
+
+//import { Label } from 'your-component-library/Label'; // Adjust the import path accordingly
+
+export interface TextAreaWithLabelProps {
+  id: string;
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  readOnly?: boolean;
+  characterLimit?: CharacterLimitProps | undefined;
+  error?: boolean;
+  dataTestId?: string;
+  ariaDescribedBy?: string;
+  ariaLabel?: string;
+  autoComplete?: string;
+  style?: React.CSSProperties;
+}
+
+export const TextArea: React.FC<TextAreaWithLabelProps> = ({
+  id,
+  value,
+  onChange,
+  onBlur,
+  readOnly = false,
+  characterLimit,
+  error = false,
+  dataTestId,
+  ariaDescribedBy,
+  ariaLabel,
+  autoComplete,
+  style,
+}) => (
+  <Textarea
+    id={id}
+    onChange={(e) => onChange(e.target.value)}
+    onBlur={onBlur}
+    readOnly={readOnly}
+    characterLimit={characterLimit}
+    error={error}
+    value={value}
+    data-testid={dataTestId}
+    aria-describedby={ariaDescribedBy}
+    aria-label={ariaLabel}
+    autoComplete={autoComplete}
+    style={style}
+  />
+);

src/layout/TextArea/TextAreaComponent.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
 
-import { Textarea } from '@digdir/designsystemet-react';
-
 import { Label } from 'src/app-components/Label/Label';
-import { getDescriptionId } from 'src/components/label/Label';
+import { TextArea } from 'src/app-components/TextArea/TextArea';
 import { FD } from 'src/features/formData/FormDataWrite';
 import { useDataModelBindings } from 'src/features/formData/useDataModelBindings';
 import { useLanguage } from 'src/features/language/useLanguage';
@@ -61,23 +59,23 @@ export function TextAreaComponent({ node, overrideDisplay }: ITextAreaProps) {
       description={getDescriptionComponent()}
     >
       <ComponentStructureWrapper node={node}>
-        <Textarea
+        <TextArea
           id={id}
-          onChange={(e) => setValue('simpleBinding', e.target.value)}
+          value={value}
+          onChange={(newValue) => setValue('simpleBinding', newValue)}
           onBlur={debounce}
           readOnly={readOnly}
           characterLimit={!readOnly ? characterLimit : undefined}
           error={!isValid}
-          value={value}
-          data-testid={id}
-          aria-describedby={
+          dataTestId={id}
+          ariaDescribedBy={
             overrideDisplay?.renderedInTable !== true && textResourceBindings?.description
-              ? getDescriptionId(id)
+              ? `description-${id}`
               : undefined
           }
-          aria-label={overrideDisplay?.renderedInTable === true ? langAsString(textResourceBindings?.title) : undefined}
+          ariaLabel={overrideDisplay?.renderedInTable === true ? langAsString(textResourceBindings?.title) : undefined}
           autoComplete={autocomplete}
-          style={{ height: '150px' }}
+          style={{ minHeight: '150px' }}
         />
       </ComponentStructureWrapper>
     </Label>