🐛 Fikser bug hvor id på input feltet hadde samme id som selve kompone…

…nten
navikt · Sep 27, 2023 · 8fc6f67 · 8fc6f67
1 parent c73d95c
commit 8fc6f67
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 19 deletions.
diff --git a/packages/aap-felles-react/src/FileInput/FileInput.test.tsx b/packages/aap-felles-react/src/FileInput/FileInput.test.tsx
@@ -129,16 +129,11 @@ describe('FileInput', () => {
     ).toBeVisible();
   });
 
-  it('Skal ikke akseptere flere filer når total fil størrelse er nådd ', async () => {
-    mockUploadFile();
-    mockUploadFile();
+  it('Skal ikke akseptere filer når total fil størrelse er nådd ', async () => {
     mockUploadFile();
 
     render(<FileInputWithState />);
     const input = screen.getByTestId('fileinput');
-    await user.upload(input, fileOne);
-    await user.upload(input, fileTwo);
-
     const fileThree: File = new File(['fil tre'], 'filTre.pdf', { type: 'application/pdf' });
     Object.defineProperty(fileThree, 'size', { value: (1024 * 1024 + 1) * 50 });
     await user.upload(input, fileThree);
@@ -147,7 +142,7 @@ describe('FileInput', () => {
       await screen.findByText(
         'Filen(e) du lastet opp er for stor. Last opp fil(er) med maksimal samlet størrelse 50 MB.'
       )
-    );
+    ).toBeVisible();
   });
 
   it('Skal være mulig å fjerne en fil', async () => {

diff --git a/packages/aap-felles-react/src/FileInput/FileInput.tsx b/packages/aap-felles-react/src/FileInput/FileInput.tsx
@@ -1,5 +1,5 @@
-import { BodyShort, Heading, Loader } from '@navikt/ds-react';
-import React, { Dispatch, InputHTMLAttributes, useRef, useState } from 'react';
+import { BodyShort, Heading } from '@navikt/ds-react';
+import React, { Dispatch, InputHTMLAttributes, useMemo, useRef, useState } from 'react';
 import { v4 as uuidV4 } from 'uuid';
 import { UploadIcon } from '@navikt/aksel-icons';
 import { FilePanelError } from './FilePanelError';
@@ -25,6 +25,7 @@ export const FileInput = (props: FileInputProps) => {
   const [dragOver, setDragOver] = useState<boolean>(false);
   const [isUploading, setIsUploading] = useState<boolean>(false);
   const fileInputElement = useRef<HTMLInputElement>(null);
+  const inputId = useMemo(() => uuidV4(), []);
 
   function internalValidate(fileToUpload: File): string | undefined {
     const totalUploadedSize = files.reduce((acc, curr) => acc + curr.size, 0);
@@ -71,19 +72,18 @@ export const FileInput = (props: FileInputProps) => {
       })
     );
 
-    setFiles([...files, ...uploadedFiles]);
     setIsUploading(false);
+    setFiles([...files, ...uploadedFiles]);
   }
 
   return (
-    <div className={'fileInput'}>
+    <div className={'fileInput'} id={props.id}>
       <Heading size={'medium'}>{heading}</Heading>
       {ingress && <BodyShort>{ingress}</BodyShort>}
       {files?.map((file, index) => {
         if (file.errorMessage) {
           return (
             <FilePanelError
-              id={props.id}
               file={file}
               key={index}
               onDelete={() => {
@@ -116,11 +116,12 @@ export const FileInput = (props: FileInputProps) => {
         }}
       >
         {isUploading ? (
-          <Loader />
+          // <Loader title={'Laster'} />
+          <div>JEG LASTER</div>
         ) : (
           <>
             <input
-              id={props.id}
+              id={inputId}
               type={'file'}
               value={''}
               onChange={(e) => {
@@ -138,11 +139,11 @@ export const FileInput = (props: FileInputProps) => {
             />
             <BodyShort>{'Dra og slipp'}</BodyShort>
             <BodyShort>{'eller'}</BodyShort>
-            <label htmlFor={props.id} aria-labelledby={props.id}>
+            <label htmlFor={inputId} aria-labelledby={props.id}>
               <span
                 className={'fileInputButton navds-button navds-button__inner navds-body-short navds-button--secondary'}
                 role={'button'}
-                aria-controls={props.id}
+                aria-controls={inputId}
                 tabIndex={0}
                 onKeyDown={(event) => {
                   if (event.key === 'Enter') {

diff --git a/packages/aap-felles-react/src/FileInput/FilePanelError.tsx b/packages/aap-felles-react/src/FileInput/FilePanelError.tsx
@@ -5,14 +5,13 @@ import { Vedlegg } from './FileInput';
 
 interface Props {
   file: Vedlegg;
-  id: string;
   onDelete: () => void;
 }
 
-export const FilePanelError = ({ file, onDelete, id }: Props) => {
+export const FilePanelError = ({ file, onDelete }: Props) => {
   return (
     <>
-      <Panel id={id} className={'fileCard error'} tabIndex={0}>
+      <Panel className={'fileCard error'} tabIndex={0}>
         <div className={'fileCardLeftContent'}>
           <div className={'fileError'}>
             <FileTextIcon color={'var(--a-surface-danger-hover)'} />