From df5a5ebb8677cf167036632e0dcec93ef0c88db2 Mon Sep 17 00:00:00 2001 From: R Ranathunga Date: Tue, 24 Sep 2024 10:40:51 -0700 Subject: [PATCH] fix: cbc edit input focus issue --- .../Project/fields/ProjectFieldTemplate.tsx | 54 +++++++++++-------- app/components/Review/Components.tsx | 18 +++---- .../Review/fields/ArrayBooleanField.tsx | 4 +- .../Review/fields/ReviewCheckboxField.tsx | 8 +-- .../Review/fields/ReviewFieldTemplate.tsx | 47 ++++++++-------- .../Review/fields/ReviewInlineArrayField.tsx | 44 ++++++++------- app/components/Review/index.ts | 1 - .../analyst/cbc/[cbcId]/edit/[section].tsx | 12 ++++- .../analyst/cbc/[cbcId]/[section].test.tsx | 4 +- 9 files changed, 98 insertions(+), 94 deletions(-) diff --git a/app/components/Analyst/Project/fields/ProjectFieldTemplate.tsx b/app/components/Analyst/Project/fields/ProjectFieldTemplate.tsx index 8ffe1f9b2..816791b2d 100644 --- a/app/components/Analyst/Project/fields/ProjectFieldTemplate.tsx +++ b/app/components/Analyst/Project/fields/ProjectFieldTemplate.tsx @@ -34,24 +34,33 @@ const StyledContainer = styled.div` } `; -const ErrorWrapper = styled.div<{ errorColor?: string }>` - position: relative; - background-color: ${(props) => props.errorColor}; - padding: 8px; - margin-bottom: 8px; - max-width: calc(100% - 8px) !important; +interface StyledInputWrapperProps { + errorColor?: string; + hasError?: boolean; +} - .pg-select-wrapper, - .datepicker-widget, - .url-widget-wrapper, - .ccbcid-widget-wrapper { - background-color: white !important; - max-width: calc(340px - 8px) !important; - } +const StyledInputWrapper = styled.div` + ${(props) => + props.hasError && + ` + position: relative; + background-color: ${props.errorColor}; + padding: 8px; + margin-bottom: 8px; + max-width: calc(100% - 8px) !important; - [class*='StyledMessage']:empty { - display: none; - } + .pg-select-wrapper, + .datepicker-widget, + .url-widget-wrapper, + .ccbcid-widget-wrapper { + background-color: white !important; + max-width: calc(340px - 8px) !important; + } + + [class*='StyledMessage']:empty { + display: none; + } + `} `; const StyledHelp = styled(Help)` @@ -80,22 +89,21 @@ const ProjectFieldTemplate: React.FC = ({ const { errorColor, __errors: formContextErrors } = formContext?.errors?.[fieldName] || {}; const hasFormContextError = formContextErrors?.length > 0; + const showError = hasFormContextError && showErrorHint; return ( <> {!hidden && ( {uiTitle && {uiTitle}} - {showErrorHint && hasFormContextError ? ( - -
{children}
+ +
{children}
+ {showError && ( - - ) : ( - children - )} + )} + )} diff --git a/app/components/Review/Components.tsx b/app/components/Review/Components.tsx index 01af9aa93..896ac3343 100644 --- a/app/components/Review/Components.tsx +++ b/app/components/Review/Components.tsx @@ -19,22 +19,22 @@ export const StyledColLeft = styled('th')` vertical-align: top; `; -export const StyledColRight = styled('td')` +interface StyledColRightProps { + errorColor?: string; + hasError?: boolean; +} + +export const StyledColRight = styled('td')` width: 50%; padding: 16px !important; border: 1px solid rgba(0, 0, 0, 0.16); border-right: 0; font-weight: 400; white-space: pre-line; -`; - -interface StyledColErrorProps { - errorColor?: string; -} - -export const StyledColError = styled(StyledColRight)` background-color: ${(props) => - props?.errorColor ? props.errorColor : props.theme.color.errorBackground}; + props.hasError && + (props?.errorColor ? props.errorColor : props.theme.color.errorBackground)}; + .pg-select-wrapper { background-color: white !important; } diff --git a/app/components/Review/fields/ArrayBooleanField.tsx b/app/components/Review/fields/ArrayBooleanField.tsx index e42206341..6d5b1b02d 100644 --- a/app/components/Review/fields/ArrayBooleanField.tsx +++ b/app/components/Review/fields/ArrayBooleanField.tsx @@ -1,6 +1,6 @@ import { FieldProps, RJSFSchema } from '@rjsf/utils'; import React from 'react'; -import { StyledColLeft, StyledColRight, StyledColError } from '../Components'; +import { StyledColLeft, StyledColRight } from '../Components'; /** Field to display a list of yes/no values instead of the enum for array type fields @@ -23,7 +23,7 @@ const ArrayBooleanField: React.FC = ({ {item} {isError ? ( - + ) : ( {isValueTrue ? 'Yes' : 'No'} diff --git a/app/components/Review/fields/ReviewCheckboxField.tsx b/app/components/Review/fields/ReviewCheckboxField.tsx index f9342344c..8071104f1 100644 --- a/app/components/Review/fields/ReviewCheckboxField.tsx +++ b/app/components/Review/fields/ReviewCheckboxField.tsx @@ -1,10 +1,6 @@ import React from 'react'; import { FieldProps } from '@rjsf/utils'; -import { - StyledColLeft, - StyledColRight, - StyledColError, -} from 'components/Review/Components'; +import { StyledColLeft, StyledColRight } from 'components/Review/Components'; const ReviewCheckboxField: React.FC = ({ id, @@ -22,7 +18,7 @@ const ReviewCheckboxField: React.FC = ({ {isChecked ? ( Yes ) : ( - + )} ) : ( diff --git a/app/components/Review/fields/ReviewFieldTemplate.tsx b/app/components/Review/fields/ReviewFieldTemplate.tsx index e874c8f00..38800f702 100644 --- a/app/components/Review/fields/ReviewFieldTemplate.tsx +++ b/app/components/Review/fields/ReviewFieldTemplate.tsx @@ -1,10 +1,6 @@ import { FieldTemplateProps } from '@rjsf/utils'; import React from 'react'; -import { - StyledColLeft, - StyledColRight, - StyledColError, -} from 'components/Review/Components'; +import { StyledColLeft, StyledColRight } from 'components/Review/Components'; import { Help } from '@mui/icons-material'; import styled from 'styled-components'; import { Tooltip } from '@mui/material'; @@ -58,33 +54,32 @@ const ReviewFieldTemplate: React.FC = ({ const isFieldInRfi = formContext?.rfiList?.some((rfi) => Object.keys(rfi?.jsonData?.rfiAdditionalFiles || []).includes(fieldName) ); + const hasError = isErrors && !isFieldInRfi; return ( <> {before} {title} - {isErrors && !isFieldInRfi ? ( - - {children} - {showErrorHint && hasFormContextError && ( - - {formContextErrors.join('\n')} - - } - placement="top" - > - - - )} - - ) : ( - - {children} - - )} + + {children} + {hasError && showErrorHint && hasFormContextError && ( + + {formContextErrors.join('\n')} + + } + placement="top" + > + + + )} + {after} diff --git a/app/components/Review/fields/ReviewInlineArrayField.tsx b/app/components/Review/fields/ReviewInlineArrayField.tsx index 08a12445a..269009c42 100644 --- a/app/components/Review/fields/ReviewInlineArrayField.tsx +++ b/app/components/Review/fields/ReviewInlineArrayField.tsx @@ -1,10 +1,6 @@ import { FieldProps } from '@rjsf/utils'; import React from 'react'; -import { - StyledColLeft, - StyledColRight, - StyledColError, -} from 'components/Review/Components'; +import { StyledColLeft, StyledColRight } from 'components/Review/Components'; const ReviewInlineArrayField: React.FC = ({ idSchema, @@ -16,27 +12,29 @@ const ReviewInlineArrayField: React.FC = ({ const fieldName = id?.split('_')?.[2]; const pageName = id?.split('_')?.[1]; const formErrorSchema = formContext?.errors ?? formContext.formErrorSchema; - const errors = formErrorSchema?.[pageName]?.[fieldName]?.__errors; + const hasError = + formErrorSchema?.[pageName]?.[fieldName]?.__errors?.length > 0; return ( {schema.title} - {errors ? ( - - ) : ( - - {formData?.map((el, index) => ( - // eslint-disable-next-line react/no-array-index-key - - {el.toString()} - {index < formData.length - 1 && ( - <> - ,
- - )} - - ))} - - )} + + {hasError + ? null + : formData?.map((el, index) => ( + // eslint-disable-next-line react/no-array-index-key + + {el.toString()} + {index < formData.length - 1 && ( + <> + ,
+ + )} + + ))} + ); }; diff --git a/app/components/Review/index.ts b/app/components/Review/index.ts index 3a2c1188d..64dd7cdd0 100644 --- a/app/components/Review/index.ts +++ b/app/components/Review/index.ts @@ -3,7 +3,6 @@ export { default as AlertIcon } from './AlertIcon'; export { default as ReviewField } from './ReviewPageField'; export { - StyledColError, StyledColLeft, StyledColRight, StyledH4, diff --git a/app/pages/analyst/cbc/[cbcId]/edit/[section].tsx b/app/pages/analyst/cbc/[cbcId]/edit/[section].tsx index a2aa1720b..411cfdae8 100644 --- a/app/pages/analyst/cbc/[cbcId]/edit/[section].tsx +++ b/app/pages/analyst/cbc/[cbcId]/edit/[section].tsx @@ -202,8 +202,16 @@ const EditCbcSection = ({ return getAllEconomicRegionNames(allCommunitiesSourceData); }, [allCommunitiesSourceData]); - const theme = { ...ProjectTheme }; - theme.templates.ArrayFieldTemplate = ArrayLocationFieldTemplate; + const theme = useMemo( + () => ({ + ...ProjectTheme, + templates: { + ...ProjectTheme.templates, + ArrayFieldTemplate: ArrayLocationFieldTemplate, + }, + }), + [] + ); const handleSubmit = () => { const { diff --git a/app/tests/pages/analyst/cbc/[cbcId]/[section].test.tsx b/app/tests/pages/analyst/cbc/[cbcId]/[section].test.tsx index 10f538704..703f05539 100644 --- a/app/tests/pages/analyst/cbc/[cbcId]/[section].test.tsx +++ b/app/tests/pages/analyst/cbc/[cbcId]/[section].test.tsx @@ -277,7 +277,7 @@ describe('EditCbcSection', () => { 'root_federalProjectNumber' ); const parentElement = projectStatusElement.closest( - '[class^="ProjectFieldTemplate__ErrorWrapper"]' + '[class^="ProjectFieldTemplate__StyledInputWrapper"]' ); expect(parentElement).toHaveStyle({ @@ -299,7 +299,7 @@ describe('EditCbcSection', () => { 'root_federalProjectNumber' ); const parentElement = projectStatusElement.closest( - '[class^="ProjectFieldTemplate__ErrorWrapper"]' + '[class^="ProjectFieldTemplate__StyledInputWrapper"]' ); expect(parentElement).toHaveStyle({