e-suite/webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgraded the form hook so that it triggers the validation after loading is set to true.

Browse Source
This commit is contained in:
Colin Dawson 2026-02-14 12:12:14 +00:00
parent 7d0a7514ad
commit 0cd3995ea0
1 changed files with 77 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/common/useForm.ts
View File

@ -1,4 +1,4 @@
import { useState, useCallback, useRef, useEffect } from "react"; import { useState, useCallback, useRef, useEffect, useMemo } from "react";
import Joi from "joi"; import Joi from "joi";
import { GeneralIdRef } from "../../utils/GeneralIdRef"; import { GeneralIdRef } from "../../utils/GeneralIdRef";
import { import {
@ -12,6 +12,7 @@ import {
Glossary, Glossary,
} from "../../modules/manager/glossary/services/glossaryService"; } from "../../modules/manager/glossary/services/glossaryService";
import { InputType } from "./Input"; import { InputType } from "./Input";
import { TaskDefinition } from "../../modules/manager/workflowTemplates/services/WorkflowTemplateService";
export interface FormError { export interface FormError {
[key: string]: string; [key: string]: string;
@ -24,6 +25,7 @@ export interface FormData {
| boolean | boolean
| CustomFieldValue[] | CustomFieldValue[]
| GeneralIdRef | GeneralIdRef
| TaskDefinition
| CustomField[] | CustomField[]
| bigint | bigint
| Glossary | Glossary
@ -623,44 +625,85 @@ export const useForm = (initialState: FormState): UseFormReturn => {
}, [setupNavigationGuard]); }, [setupNavigationGuard]);
useEffect(() => { useEffect(() => {
if (!wasLoadedRef.current && state.loaded) { const becameLoaded = !wasLoadedRef.current && state.loaded;
if (becameLoaded) {
// Snapshot initial data
initialDataRef.current = JSON.parse(JSON.stringify(state.data)); initialDataRef.current = JSON.parse(JSON.stringify(state.data));
// Trigger validation immediately after load
Promise.resolve().then(() => {
const errors = validate(state.data);
setState({ errors });
});
} }
wasLoadedRef.current = state.loaded; wasLoadedRef.current = state.loaded;
}, [state.loaded, state.data]); }, [state.loaded, state.data, validate, setState]);
const api = useMemo(
() => ({
state,
schema: schemaRef.current,
validate,
GetCustomFieldValues,
CustomFieldValues,
setCustomFieldValues,
getCustomFieldType,
handleSubmit,
handleGeneralError,
handleChange,
handleTextAreaChange,
handleCustomFieldChange,
handleTemplateEditorChange,
handleSelectChange,
handlePickerChange,
handleDomainPickerChange,
handleGlossaryPickerChange,
handleTemplateFormPickerChange,
handleUserPickerChange,
handleSsoProviderPickerChange,
handleToggleChange,
handleTasksChange,
setState,
hasUnsavedChanges,
markAsSaved,
setupNavigationGuard,
enableReactRouterGuard,
disableReactRouterGuard,
routerGuardEnabledRef,
}),
[
state,
validate,
GetCustomFieldValues,
CustomFieldValues,
setCustomFieldValues,
getCustomFieldType,
handleSubmit,
handleGeneralError,
handleChange,
handleTextAreaChange,
handleCustomFieldChange,
handleTemplateEditorChange,
handleSelectChange,
handlePickerChange,
handleDomainPickerChange,
handleGlossaryPickerChange,
handleTemplateFormPickerChange,
handleUserPickerChange,
handleSsoProviderPickerChange,
handleToggleChange,
handleTasksChange,
setState,
hasUnsavedChanges,
markAsSaved,
setupNavigationGuard,
enableReactRouterGuard,
disableReactRouterGuard,
],
);
const api: any = {
state,
schema: schemaRef.current,
validate,
GetCustomFieldValues,
CustomFieldValues,
setCustomFieldValues,
getCustomFieldType,
handleSubmit,
handleGeneralError,
handleChange,
handleTextAreaChange,
handleCustomFieldChange,
handleTemplateEditorChange,
handleSelectChange,
handlePickerChange,
handleDomainPickerChange,
handleGlossaryPickerChange,
handleTemplateFormPickerChange,
handleUserPickerChange,
handleSsoProviderPickerChange,
handleToggleChange,
handleTasksChange,
setState,
hasUnsavedChanges,
markAsSaved,
setupNavigationGuard,
enableReactRouterGuard,
disableReactRouterGuard,
routerGuardEnabledRef,
};
Object.defineProperty(api, "schema", { Object.defineProperty(api, "schema", {
get: () => schemaRef.current, get: () => schemaRef.current,
set: (value: joiSchema) => { set: (value: joiSchema) => {