diff --git a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx index f01b542aac9..78cd45065d1 100644 --- 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() 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 (
  • { it('renders the delete button', () => { render() - const element = screen.getByRole('button') + const element = document.querySelector('button') expect(element).toBeInTheDocument() }) @@ -316,7 +316,7 @@ describe('UploadFileListCell', () => { /> ) - const element = screen.getByRole('button') + const element = document.querySelector('button') expect(element.textContent).toMatch(deleteButtonText) }) @@ -324,7 +324,7 @@ describe('UploadFileListCell', () => { it('renders button as tertiary', () => { render() - 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 ( +
    + + +
    + ) + } + const { rerender } = render() + + 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() + + fireEvent.click(removeButton) + expect(focus).toHaveBeenCalledTimes(1) + expect(focus).toHaveBeenCalledWith({ preventScroll: true }) + }) }) })