zerberu5 opened a new issue, #1638: URL: https://github.com/apache/camel-karavan/issues/1638
## Describe the bug Typing an invalid value into the **Name** field of the "Create Project / File / Kamelet" dialog crashes the panel instead of showing a validation message. `useFormUtil` has two renderers: `getHelper(text?: string)`, which renders its argument directly, and `getError(error: FieldError | undefined)`, which renders `error.message`. Three helpers pass a react-hook-form `FieldError` **object** to `getHelper`, so the object ends up as a React child and React throws. The form uses `mode: "all"`, so validation runs on every keystroke, and one rule requires `value.length > 3`. The very first character therefore always produces an error object — the dialog crashes on the first keystroke and the name can never be typed. Pasting a valid name (4+ chars) works, because `onChange` then fires once with a value that passes validation and no error object is ever created. ## Steps to reproduce 1. Open a project and start creating a file / kamelet 2. Type a single character into the **Name** field ## Expected The validation message `File name should be longer that 3 characters` is shown below the field. ## Actual The panel is replaced by the ErrorBoundary message: ``` Error in Element with key: undefined Something went wrong: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bref%2C%20type%2C%20message%7D ``` Decoded, React error #31 is *"Objects are not valid as a React child (found: object with keys {ref, type, message})"* — the shape of a react-hook-form `FieldError`. ## Root cause `karavan-app/src/main/webui/src/ui/util/useFormUtil.tsx` ```tsx function getHelper(text?: string) // line 48 — renders {text} as-is function getError(error: FieldError | undefined) // line 62 — renders {error.message} ``` Three call sites pass an error object to `getHelper` instead of `getError`: | line | helper | reachable from UI | |---|---|---| | 235 | `getTextFieldPrefix` | no current caller | | 265 | `getTextFieldSuffix` | **yes** — `CreateProjectModal.tsx:156` | | 290 | `getFormSelect` | no current caller | The `as any` cast in `getHelper((errors as any)[fieldName])` suppresses the type error that would otherwise have caught this, since `getHelper` is declared to take a `string`. Only the `getTextFieldSuffix` case is currently reachable, via `karavan-app/src/main/webui/src/ui/features/project/files/CreateProjectModal.tsx:156`: ```tsx const formContext = useForm<ProjectFile>({mode: "all"}); const {getTextFieldSuffix} = useFormUtil(formContext); ... {getTextFieldSuffix('name', 'Name', getFileSuffix(), { regex: v => isValidFileName(v) || 'Only characters, numbers and dashes allowed', length: v => v.length > 3 || 'File name should be longer that 3 characters', name: v => !RESERVED_WORDS.includes(v) || "Reserved word", })} ``` The other two are latent and will fail the same way as soon as a caller adds validation. ## Suggested fix Use `getError` at all three call sites. Verified locally: after the change the same keystroke renders the expected validation message and the dialog behaves normally. Side note, not included in the fix: `getTextFieldSuffix` also has its error styling commented out (`// validated={...}`, line 254), so the field is not marked invalid even once the message renders correctly. ## Environment - Karavan `4.18.1` (`ghcr.io/apache/camel-karavan:4.18.1`), and reproduced from source on `main` @ `9a9d6934` - Deployment: Docker, PostgreSQL 16 - Browser: Brave -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
