diff --git a/packages/libs/user-datasets/src/lib/Components/Upload/UploadForm/Components/UploadErrorBanner.tsx b/packages/libs/user-datasets/src/lib/Components/Upload/UploadForm/Components/UploadErrorBanner.tsx index 97a542c9ba..b274736b80 100644 --- a/packages/libs/user-datasets/src/lib/Components/Upload/UploadForm/Components/UploadErrorBanner.tsx +++ b/packages/libs/user-datasets/src/lib/Components/Upload/UploadForm/Components/UploadErrorBanner.tsx @@ -2,7 +2,6 @@ import React, { ReactElement, ReactNode } from 'react'; import Banner from '@veupathdb/coreui/lib/components/banners/Banner'; import { ValidationErrors } from '../../../../Service'; import { BadUpload } from '../../../../StoreModules'; -import { Link } from 'react-router-dom'; export interface UploadErrorBannerProps { readonly errors: BadUpload | undefined; @@ -52,20 +51,30 @@ function makeValidationErrorMessage(errors: ValidationErrors): ReactElement { if ('byKey' in errors) { for (const jsonPath of Object.keys(errors.byKey)) { - const link = document.getElementById(jsonPath) ? ( - {formatJPath(jsonPath)} - ) : ( - formatJPath(jsonPath) - ); + // using ` { + element.scrollIntoView(); + element.focus(); + }} + > + {formatJPath(jsonPath)} + + ); for (const msg of errors.byKey[jsonPath]) { - elements.push( - newLI( - <> - {link}: {msg} - - ) - ); + elements.push(newLI(<>{link}: {msg})); } } } diff --git a/packages/libs/user-datasets/src/lib/Components/Upload/UploadForm/UploadForm.scss b/packages/libs/user-datasets/src/lib/Components/Upload/UploadForm/UploadForm.scss index 0febc5f09c..b2d8e17b76 100644 --- a/packages/libs/user-datasets/src/lib/Components/Upload/UploadForm/UploadForm.scss +++ b/packages/libs/user-datasets/src/lib/Components/Upload/UploadForm/UploadForm.scss @@ -44,6 +44,15 @@ font-style: italic; } + button.error-link { + background: none; + border: none; + color: var(--coreui-blue-700); + padding: 0; + margin: 0; + display: inline; + } + div.input-block { border-width: 1px; border-style: solid;