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;