fix(web): show url validation error for each value on multiple field #1336
Conversation
WalkthroughThe changes in this pull request focus on enhancing the Changes
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for reearth-cms ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (3)
web/src/components/molecules/Schema/FieldModal/FieldDefaultInputs/URLField/index.tsx (1)
15-15: Optimize error state updates with useMemoConsider memoizing the error indexes calculation to prevent unnecessary re-renders.
Here's a suggested implementation:
- const [errorIndexes, setErrorIndexes] = useState(new Set<number>()); + const [errorIndexes, setErrorIndexes] = useState<Set<number>>(new Set()); + const validateValue = useMemo( + () => async (_: any, value: string | string[]) => { + const indexes = urlErrorIndexesGet(value); + setErrorIndexes(new Set(indexes)); + if (indexes.length) return Promise.reject(); + return Promise.resolve(); + }, + [] + ); // In rules array: - validator: async (_, value) => { - const indexes = urlErrorIndexesGet(value); - setErrorIndexes(new Set(indexes)); - if (indexes.length) { - return Promise.reject(); - } - return Promise.resolve(); - }, + validator: validateValue,Also applies to: 27-32
web/src/components/molecules/Content/Form/fields/FieldComponents/URLField.tsx (2)
22-43: Extract URL validation logic into a custom hookThere's duplicate validation logic between both URLField components. Consider creating a shared hook to improve maintainability and reduce code duplication.
Create a new hook like this:
// hooks/useURLValidation.ts export const useURLValidation = (t: (key: string) => string) => { const [errorIndexes, setErrorIndexes] = useState<Set<number>>(new Set()); const validateURL = useMemo( () => async (_: any, value: string | string[]) => { const indexes = urlErrorIndexesGet(value); setErrorIndexes(new Set(indexes)); if (indexes.length) return Promise.reject(); return Promise.resolve(); }, [] ); const validationRule = { message: t("URL is not valid"), validator: validateURL, }; return { errorIndexes, validationRule }; };This would simplify both URLField components and ensure consistent validation behavior.
54-55: Consider adding aria-invalid attribute for accessibilityWhile the visual error state is handled, adding aria-invalid would improve accessibility for screen readers.
Update the components like this:
<MultiValueField FieldInput={Input} onBlur={onMetaUpdate} disabled={disabled} required={required} errorIndexes={errorIndexes} + aria-invalid={errorIndexes.size > 0} /> <Input onBlur={onMetaUpdate} disabled={disabled} required={required} isError={errorIndexes.has(0)} + aria-invalid={errorIndexes.has(0)} />Also applies to: 61-62
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
web/src/components/molecules/Content/Form/fields/FieldComponents/URLField.tsx(2 hunks)web/src/components/molecules/Content/Form/fields/utils.ts(2 hunks)web/src/components/molecules/Schema/FieldModal/FieldDefaultInputs/URLField/index.tsx(1 hunks)
Overview
This PR fixes to show URL validation error for each value on multiple field.
Memo
I removed showCount and maxLength attributes from URL field.
Summary by CodeRabbit
New Features
URLFieldcomponent for improved error handling.Bug Fixes
Documentation