fix(Upload): avoid scrolling when removing file from list (#4380)

dnbexperience · Dec 11, 2024 · 43a64d4 · 43a64d4
1 parent fd1fef9
commit 43a64d4
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 23 deletions.
diff --git a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useCallback, useRef } from 'react'
 import classnames from 'classnames'
 
 // Components
@@ -25,7 +25,7 @@ import {
 import { UploadFile, UploadFileNative } from './types'
 
 // Shared
-import { getPreviousSibling, warn } from '../../shared/component-helper'
+import { getPreviousSibling } from '../../shared/component-helper'
 import useUpload from './useUpload'
 import { getFileTypeFromExtension } from './UploadVerify'
 import UploadFileLink from './UploadFileListLink'
@@ -96,26 +96,20 @@ const UploadFileListCell = ({
   const cellRef = useRef<HTMLLIElement>()
   const exists = useExistsHighlight(id, file)
 
-  const handleDisappearFocus = () => {
-    try {
-      const cellElement = cellRef.current
-      const focusElement = getPreviousSibling(
-        '.dnb-upload',
-        cellElement
-      ).querySelector(
-        '.dnb-upload__file-input-button'
-      ) as HTMLButtonElement
-      focusElement.focus()
-    } catch (e) {
-      warn(e)
-    }
-  }
+  const handleDisappearFocus = useCallback(() => {
+    const cellElement = cellRef.current
+    const focusElement = getPreviousSibling(
+      '.dnb-upload',
+      cellElement
+    )?.querySelector('.dnb-upload__file-input-button') as HTMLButtonElement
+    focusElement?.focus({ preventScroll: true })
+  }, [cellRef])
 
-  const onDeleteHandler = () => {
+  const onDeleteHandler = useCallback(() => {
     handleDisappearFocus()
 
     onDelete()
-  }
+  }, [handleDisappearFocus, onDelete])
 
   return (
     <li

diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx b/packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx
@@ -301,7 +301,7 @@ describe('UploadFileListCell', () => {
     it('renders the delete button', () => {
       render(<UploadFileListCell {...defaultProps} />)
 
-      const element = screen.getByRole('button')
+      const element = document.querySelector('button')
 
       expect(element).toBeInTheDocument()
     })
@@ -316,15 +316,15 @@ describe('UploadFileListCell', () => {
         />
       )
 
-      const element = screen.getByRole('button')
+      const element = document.querySelector('button')
 
       expect(element.textContent).toMatch(deleteButtonText)
     })
 
     it('renders button as tertiary', () => {
       render(<UploadFileListCell {...defaultProps} />)
 
-      const element = screen.getByRole('button')
+      const element = document.querySelector('button')
 
       expect(element.className).toMatch('dnb-button--tertiary')
     })
@@ -357,7 +357,7 @@ describe('UploadFileListCell', () => {
           onDelete={onDelete}
         />
       )
-      const element = screen.getByRole('button')
+      const element = document.querySelector('button')
 
       fireEvent.click(element)
 
@@ -374,7 +374,7 @@ describe('UploadFileListCell', () => {
           }}
         />
       )
-      const element = screen.getByRole('button')
+      const element = document.querySelector('button')
 
       expect(element).toBeDisabled()
     })
@@ -394,5 +394,45 @@ describe('UploadFileListCell', () => {
         document.querySelector('.dnb-progress-indicator')
       ).not.toBeInTheDocument()
     })
+
+    it('should set focus when clicking the delete button', () => {
+      const MockComponent = () => {
+        return (
+          <div className="dnb-upload">
+            <UploadFileListCell
+              {...defaultProps}
+              uploadFile={{
+                file: createMockFile('file.png', 100, 'image/png'),
+              }}
+            />
+            <button className="dnb-upload__file-input-button">
+              Mock button
+            </button>
+          </div>
+        )
+      }
+      const { rerender } = render(<MockComponent />)
+
+      const removeButton = document.querySelector('button')
+      const uploadButton = document.querySelector(
+        '.dnb-upload__file-input-button'
+      )
+
+      expect(document.body).toHaveFocus()
+
+      fireEvent.click(removeButton)
+      expect(uploadButton).toHaveFocus()
+
+      const focus = jest.fn()
+      jest
+        .spyOn(HTMLElement.prototype, 'focus')
+        .mockImplementationOnce(focus)
+
+      rerender(<MockComponent />)
+
+      fireEvent.click(removeButton)
+      expect(focus).toHaveBeenCalledTimes(1)
+      expect(focus).toHaveBeenCalledWith({ preventScroll: true })
+    })
   })
 })