diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-upload-doc.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-upload-doc.tsx index afd0bf3671..812c481b26 100644 --- a/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-upload-doc.tsx +++ b/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-upload-doc.tsx @@ -1,5 +1,5 @@ import { useTranslation } from 'react-i18next' -import { useCallback, useEffect, useState } from 'react' +import { useCallback, useEffect, useRef, useState } from 'react' import Uppy from '@uppy/core' import XHRUpload from '@uppy/xhr-upload' import { Dashboard } from '@uppy/react' @@ -35,6 +35,7 @@ export default function FileTreeUploadDoc() { const [conflicts, setConflicts] = useState([]) const [folderConflicts, setFolderConflicts] = useState([]) const [overwrite, setOverwrite] = useState(false) + const dashboardRef = useRef(null) const maxNumberOfFiles = 180 const maxFileSize = getMeta('ol-ExposedSettings').maxUploadSize @@ -263,6 +264,22 @@ export default function FileTreeUploadDoc() { !overwrite && !showFolderUploadConflicts && conflicts.length > 0 const showDashboard = !showFileUploadConfilcts && !showFolderUploadConflicts + useEffect(() => { + if (!showDashboard) { + return + } + + const frameId = window.requestAnimationFrame(() => { + dashboardRef.current + ?.querySelector('.uppy-Dashboard-browse') + ?.focus() + }) + + return () => { + window.cancelAnimationFrame(frameId) + } + }, [showDashboard]) + return ( <> {error && ( @@ -284,30 +301,32 @@ export default function FileTreeUploadDoc() { /> )} {showDashboard && ( - +
+ +
)} ) diff --git a/services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-modal-create-file.spec.tsx b/services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-modal-create-file.spec.tsx index 95cce1e2ba..f2f2b69c2e 100644 --- a/services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-modal-create-file.spec.tsx +++ b/services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-modal-create-file.spec.tsx @@ -530,13 +530,14 @@ describe('', function () { // the submit button should not be present cy.findByRole('button', { name: 'Create' }).should('not.exist') + cy.findByRole('button', { name: 'Select files' }).should('be.focused') cy.wrap(null).then(() => { const clipboardData = new DataTransfer() clipboardData.items.add( new File(['test'], 'test.tex', { type: 'text/plain' }) ) - cy.findByLabelText('Uppy Dashboard').trigger('paste', { clipboardData }) + cy.focused().trigger('paste', { clipboardData }) }) cy.wait('@uploadFile')