Fix #1638: render form validation errors with getError instead of getHelper#1639
Open
zerberu5 wants to merge 1 commit into
Open
Fix #1638: render form validation errors with getError instead of getHelper#1639zerberu5 wants to merge 1 commit into
zerberu5 wants to merge 1 commit into
Conversation
Render validation errors with getError instead of getHelper. getTextFieldPrefix, getTextFieldSuffix and getFormSelect passed a react-hook-form FieldError object to getHelper, which renders its argument directly as a React child. Since getHelper is declared to take a string, the `as any` cast at the call sites hid the mismatch, and any failing validation crashed the surrounding panel with "Objects are not valid as a React child". getError already exists for this and renders error.message. Reachable via CreateProjectModal, which validates on every keystroke and requires a name longer than 3 characters, so the dialog crashed on the first character typed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #1638
Problem
useFormUtilhas two renderers for the text below a form field:getHelper(text?: string)— renders its argument directlygetError(error: FieldError | undefined)— renderserror.messageThree helpers passed a react-hook-form
FieldErrorobject togetHelper, so the object was rendered as a React child and React threw "Objects are not valid as a React child (found: object with keys {ref, type, message})", taking down the surrounding panel via the ErrorBoundary.Because
getHelperis declared to take astring, theas anycast at the call sites hid the type mismatch.Change
Use
getErrorat the three affected call sites inuseFormUtil.tsx:getTextFieldPrefixgetTextFieldSuffixCreateProjectModal.tsx:156getFormSelectThe
getTextFieldSuffixcase is the user-visible one.CreateProjectModalvalidates withmode: "all"and requires a name longer than 3 characters, so the first character typed into the Name field always produced an error object and crashed the dialog — making the name impossible to type. Pasting a valid name worked, sinceonChangethen fired once with a value that passed validation.The other two are latent and would fail the same way as soon as a caller adds validation.
Verification
Reproduced on
mainby typing a single character into the Name field of the create dialog, then confirmed with this change applied that the same keystroke renders the expectedFile name should be longer that 3 charactersmessage and the dialog behaves normally.Note, not addressed here
getTextFieldSuffixalso has its invalid-state styling commented out (// validated={...}, line 254), so the field is not visually marked as invalid even now that the message renders. Left alone to keep this change minimal.