tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(ui): prevents field errors from flashing when used outside of field props context (#5488)

Browse Source
This commit is contained in:
Jacob Fletcher
2024-03-27 10:48:05 -04:00
committed by GitHub
parent 0c51502cc5
commit 3f0d0ecd5f
5 changed files with 28 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/next/src/views/Login/LoginForm/index.tsx
View File

@@ -15,7 +15,6 @@ import { Form } from '@payloadcms/ui/forms/Form'
import { FormSubmit } from '@payloadcms/ui/forms/Submit' import { FormSubmit } from '@payloadcms/ui/forms/Submit'
import { useConfig } from '@payloadcms/ui/providers/Config' import { useConfig } from '@payloadcms/ui/providers/Config'
import { useTranslation } from '@payloadcms/ui/providers/Translation' import { useTranslation } from '@payloadcms/ui/providers/Translation'
import { useRouter } from 'next/navigation.js'
import './index.scss' import './index.scss'
@@ -29,7 +28,6 @@ export const LoginForm: React.FC<{
routes: { admin, api }, routes: { admin, api },
} = config } = config
const router = useRouter()
const { t } = useTranslation() const { t } = useTranslation()
const prefillForm = autoLogin && autoLogin.prefillOnly const prefillForm = autoLogin && autoLogin.prefillOnly
@@ -54,10 +52,7 @@ export const LoginForm: React.FC<{
disableSuccessStatus disableSuccessStatus
initialState={initialState} initialState={initialState}
method="POST" method="POST"
onSuccess={() => { redirect={typeof searchParams?.redirect === 'string' ? searchParams.redirect : admin}
router.push(admin)
}}
redirect={typeof searchParams?.redirect === 'string' ? searchParams.redirect : ''}
waitForAutocomplete waitForAutocomplete
> >
<FormLoadingOverlayToggle action="loading" name="login-form" /> <FormLoadingOverlayToggle action="loading" name="login-form" />

4
packages/ui/src/fields/Email/index.tsx
View File

@@ -76,8 +76,8 @@ const EmailField: React.FC<EmailFieldProps> = (props) => {
width, width,
}} }}
> >
<FieldError CustomError={CustomError} {...(errorProps || {})} /> <FieldError CustomError={CustomError} {...(errorProps || { path })} />
<FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} /> <FieldLabel CustomLabel={CustomLabel} {...(labelProps || { path })} />
<div> <div>
{BeforeInput} {BeforeInput}
<input <input

4
packages/ui/src/fields/Password/index.tsx
View File

@@ -67,8 +67,8 @@ const PasswordField: React.FC<PasswordFieldProps> = (props) => {
width, width,
}} }}
> >
<FieldError CustomError={CustomError} {...(errorProps || {})} /> <FieldError CustomError={CustomError} {...(errorProps || { path })} />
<FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} /> <FieldLabel CustomLabel={CustomLabel} {...(labelProps || { path })} />
<input <input
autoComplete={autoComplete} autoComplete={autoComplete}
disabled={formProcessing || disabled} disabled={formProcessing || disabled}

2
packages/ui/src/forms/FieldError/index.tsx
View File

@@ -28,7 +28,7 @@ const DefaultFieldError: React.FC<ErrorProps> = (props) => {
const { errorMessage, valid } = field || {} const { errorMessage, valid } = field || {}
const message = messageFromProps || errorMessage const message = messageFromProps || errorMessage
const showMessage = showErrorFromProps || (hasSubmitted && !valid) const showMessage = showErrorFromProps || (hasSubmitted && valid === false)
if (showMessage) { if (showMessage) {
return ( return (

93
tsconfig.json
View File

@@ -11,11 +11,7 @@
"esModuleInterop": true, "esModuleInterop": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"jsx": "preserve", "jsx": "preserve",
"lib": [ "lib": ["dom", "dom.iterable", "esnext"],
"dom",
"dom.iterable",
"esnext"
],
"noEmit": true, "noEmit": true,
"outDir": "./dist", "outDir": "./dist",
"resolveJsonModule": true, "resolveJsonModule": true,
@@ -23,11 +19,7 @@
"skipLibCheck": true, "skipLibCheck": true,
"sourceMap": true, "sourceMap": true,
"strict": false, "strict": false,
"types": [ "types": ["jest", "node", "@types/jest"],
"jest",
"node",
"@types/jest"
],
"incremental": true, "incremental": true,
"isolatedModules": true, "isolatedModules": true,
"plugins": [ "plugins": [
@@ -36,65 +28,26 @@
} }
], ],
"paths": { "paths": {
"@payload-config": [ "@payload-config": ["./test/_community/config.ts"],
"./test/fields/config.ts" "@payloadcms/live-preview": ["./packages/live-preview/src"],
], "@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],
"@payloadcms/live-preview": [ "@payloadcms/ui/assets": ["./packages/ui/src/assets/index.ts"],
"./packages/live-preview/src" "@payloadcms/ui/elements/*": ["./packages/ui/src/elements/*/index.tsx"],
], "@payloadcms/ui/fields/*": ["./packages/ui/src/fields/*/index.tsx"],
"@payloadcms/live-preview-react": [ "@payloadcms/ui/forms/*": ["./packages/ui/src/forms/*/index.tsx"],
"./packages/live-preview-react/src/index.ts" "@payloadcms/ui/graphics/*": ["./packages/ui/src/graphics/*/index.tsx"],
], "@payloadcms/ui/hooks/*": ["./packages/ui/src/hooks/*.ts"],
"@payloadcms/ui/assets": [ "@payloadcms/ui/icons/*": ["./packages/ui/src/icons/*/index.tsx"],
"./packages/ui/src/assets/index.ts" "@payloadcms/ui/providers/*": ["./packages/ui/src/providers/*/index.tsx"],
], "@payloadcms/ui/templates/*": ["./packages/ui/src/templates/*/index.tsx"],
"@payloadcms/ui/elements/*": [ "@payloadcms/ui/utilities/*": ["./packages/ui/src/utilities/*.ts"],
"./packages/ui/src/elements/*/index.tsx" "@payloadcms/ui/scss": ["./packages/ui/src/scss.scss"],
], "@payloadcms/ui/scss/app.scss": ["./packages/ui/src/scss/app.scss"],
"@payloadcms/ui/fields/*": [ "@payloadcms/next/*": ["./packages/next/src/*"],
"./packages/ui/src/fields/*/index.tsx" "@payloadcms/next": ["./packages/next/src/exports/*"]
],
"@payloadcms/ui/forms/*": [
"./packages/ui/src/forms/*/index.tsx"
],
"@payloadcms/ui/graphics/*": [
"./packages/ui/src/graphics/*/index.tsx"
],
"@payloadcms/ui/hooks/*": [
"./packages/ui/src/hooks/*.ts"
],
"@payloadcms/ui/icons/*": [
"./packages/ui/src/icons/*/index.tsx"
],
"@payloadcms/ui/providers/*": [
"./packages/ui/src/providers/*/index.tsx"
],
"@payloadcms/ui/templates/*": [
"./packages/ui/src/templates/*/index.tsx"
],
"@payloadcms/ui/utilities/*": [
"./packages/ui/src/utilities/*.ts"
],
"@payloadcms/ui/scss": [
"./packages/ui/src/scss.scss"
],
"@payloadcms/ui/scss/app.scss": [
"./packages/ui/src/scss/app.scss"
],
"@payloadcms/next/*": [
"./packages/next/src/*"
],
"@payloadcms/next": [
"./packages/next/src/exports/*"
]
} }
}, },
"exclude": [ "exclude": ["dist", "build", "temp", "node_modules"],
"dist",
"build",
"temp",
"node_modules"
],
"composite": true, "composite": true,
"references": [ "references": [
{ {
@@ -155,9 +108,5 @@
"path": "./packages/ui" "path": "./packages/ui"
} }
], ],
"include": [ "include": ["next-env.d.ts", ".next/types/**/*.ts", "scripts/**/*.ts"]
"next-env.d.ts",
".next/types/**/*.ts",
"scripts/**/*.ts"
]
} }