From dd420e07b0777d74e75d1afd5898977e8dbdfdcc Mon Sep 17 00:00:00 2001 From: Amanda Anderson Date: Mon, 30 Oct 2023 16:47:30 +0100 Subject: [PATCH 1/5] Handle error scrolling JSON forms --- .../components/Form/Components/ErrorDisplay.tsx | 2 +- front/app/components/Form/index.tsx | 16 +++++++++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/front/app/components/Form/Components/ErrorDisplay.tsx b/front/app/components/Form/Components/ErrorDisplay.tsx index 722aaec700e5..530c05fa1022 100644 --- a/front/app/components/Form/Components/ErrorDisplay.tsx +++ b/front/app/components/Form/Components/ErrorDisplay.tsx @@ -155,7 +155,7 @@ export default ({ fieldPath, ajvErrors, didBlur }: Props) => { enter={true} exit={true} > - + diff --git a/front/app/components/Form/index.tsx b/front/app/components/Form/index.tsx index b4f8fd195217..b147e89c88f6 100644 --- a/front/app/components/Form/index.tsx +++ b/front/app/components/Form/index.tsx @@ -1,4 +1,4 @@ -import React, { memo, ReactElement, useState } from 'react'; +import React, { memo, ReactElement, useEffect, useState } from 'react'; // jsonforms import { @@ -120,11 +120,22 @@ const Form = memo( const [apiErrors, setApiErrors] = useState(); const [loading, setLoading] = useState(false); + const [scrollToError, setScrollToError] = useState(false); const [showAllErrors, setShowAllErrors] = useState(false); const isSurvey = config === 'survey'; const showSubmitButton = !isSurvey; + useEffect(() => { + if (scrollToError) { + // Scroll to the first field with an error + document + ?.getElementById(`error-display]`)?.[0] + .scrollIntoView({ behavior: 'smooth', block: 'center' }); + setScrollToError(false); + } + }, [scrollToError]); + const layoutType = layout ? layout : isCategorization(uiSchema) @@ -146,14 +157,17 @@ const Form = memo( setShowAllErrors(true); if (isValidData(schema, uiSchema, submissionData, customAjv, isSurvey)) { + setScrollToError(false); setLoading(true); try { await onSubmit(submissionData); } catch (e) { + setScrollToError(true); setApiErrors(e.errors); } setLoading(false); } + setScrollToError(true); }; useObserveEvent(submitOnEvent, handleSubmit); From 08bacb41396c064968f4dba37b8bab402fc15451 Mon Sep 17 00:00:00 2001 From: Amanda Anderson Date: Mon, 30 Oct 2023 16:48:55 +0100 Subject: [PATCH 2/5] Fix selector --- front/app/components/Form/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/app/components/Form/index.tsx b/front/app/components/Form/index.tsx index b147e89c88f6..c41b4027a7c6 100644 --- a/front/app/components/Form/index.tsx +++ b/front/app/components/Form/index.tsx @@ -130,7 +130,7 @@ const Form = memo( if (scrollToError) { // Scroll to the first field with an error document - ?.getElementById(`error-display]`)?.[0] + .querySelectorAll(`[id*=error-display]`)[0] .scrollIntoView({ behavior: 'smooth', block: 'center' }); setScrollToError(false); } From d819906e03976b7c9a8a1650cdcc59f93ec558e7 Mon Sep 17 00:00:00 2001 From: Amanda Anderson Date: Tue, 31 Oct 2023 11:08:42 +0100 Subject: [PATCH 3/5] Simplify query selector --- front/app/components/Form/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/app/components/Form/index.tsx b/front/app/components/Form/index.tsx index c41b4027a7c6..cf4f7c234a7b 100644 --- a/front/app/components/Form/index.tsx +++ b/front/app/components/Form/index.tsx @@ -130,7 +130,7 @@ const Form = memo( if (scrollToError) { // Scroll to the first field with an error document - .querySelectorAll(`[id*=error-display]`)[0] + .querySelectorAll('#error-display')[0] .scrollIntoView({ behavior: 'smooth', block: 'center' }); setScrollToError(false); } From 221149a35c60a19ff8985a39b2450cc970ca3ec3 Mon Sep 17 00:00:00 2001 From: Amanda Anderson Date: Tue, 31 Oct 2023 11:18:35 +0100 Subject: [PATCH 4/5] Add for surveys --- .../Form/Components/Layouts/CLPageLayout.tsx | 12 ++++++++++++ front/app/components/Form/index.tsx | 1 - 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/front/app/components/Form/Components/Layouts/CLPageLayout.tsx b/front/app/components/Form/Components/Layouts/CLPageLayout.tsx index ba156326e8b3..3851c21bee43 100644 --- a/front/app/components/Form/Components/Layouts/CLPageLayout.tsx +++ b/front/app/components/Form/Components/Layouts/CLPageLayout.tsx @@ -73,6 +73,7 @@ const CLPageLayout = memo( .elements as PageType[]; const [uiPages, setUiPages] = useState(pageTypeElements); const [userPagePath] = useState([]); + const [scrollToError, setScrollToError] = useState(false); const theme = useTheme(); const formState = useJsonForms(); const isSmallerThanPhone = useBreakpoint('phone'); @@ -100,6 +101,16 @@ const CLPageLayout = memo( setUiPages(visiblePages); }, [formState.core?.data, uischema]); + useEffect(() => { + if (scrollToError) { + // Scroll to the first field with an error + document + .querySelectorAll('#error-display')[0] + .scrollIntoView({ behavior: 'smooth', block: 'center' }); + setScrollToError(false); + } + }, [scrollToError]); + const scrollToTop = () => { if (useTopAnchor) { topAnchorRef.current.scrollIntoView(); @@ -134,6 +145,7 @@ const CLPageLayout = memo( setIsLoading(false); } else { setShowAllErrors?.(true); + setScrollToError(true); } }; diff --git a/front/app/components/Form/index.tsx b/front/app/components/Form/index.tsx index cf4f7c234a7b..a8f3f92ae29c 100644 --- a/front/app/components/Form/index.tsx +++ b/front/app/components/Form/index.tsx @@ -157,7 +157,6 @@ const Form = memo( setShowAllErrors(true); if (isValidData(schema, uiSchema, submissionData, customAjv, isSurvey)) { - setScrollToError(false); setLoading(true); try { await onSubmit(submissionData); From a11d21a51590f967c71c0e278c0775d023700cc9 Mon Sep 17 00:00:00 2001 From: Amanda Anderson Date: Tue, 31 Oct 2023 16:00:43 +0100 Subject: [PATCH 5/5] Use better selector --- front/app/components/Form/Components/Layouts/CLPageLayout.tsx | 4 ++-- front/app/components/Form/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/front/app/components/Form/Components/Layouts/CLPageLayout.tsx b/front/app/components/Form/Components/Layouts/CLPageLayout.tsx index 3851c21bee43..72458b810dd3 100644 --- a/front/app/components/Form/Components/Layouts/CLPageLayout.tsx +++ b/front/app/components/Form/Components/Layouts/CLPageLayout.tsx @@ -105,8 +105,8 @@ const CLPageLayout = memo( if (scrollToError) { // Scroll to the first field with an error document - .querySelectorAll('#error-display')[0] - .scrollIntoView({ behavior: 'smooth', block: 'center' }); + .getElementById('error-display') + ?.scrollIntoView({ behavior: 'smooth', block: 'center' }); setScrollToError(false); } }, [scrollToError]); diff --git a/front/app/components/Form/index.tsx b/front/app/components/Form/index.tsx index a8f3f92ae29c..3a4f0f57d3a9 100644 --- a/front/app/components/Form/index.tsx +++ b/front/app/components/Form/index.tsx @@ -130,8 +130,8 @@ const Form = memo( if (scrollToError) { // Scroll to the first field with an error document - .querySelectorAll('#error-display')[0] - .scrollIntoView({ behavior: 'smooth', block: 'center' }); + .getElementById('error-display') + ?.scrollIntoView({ behavior: 'smooth', block: 'center' }); setScrollToError(false); } }, [scrollToError]);