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 { useConfig } from '@payloadcms/ui/providers/Config'
import { useTranslation } from '@payloadcms/ui/providers/Translation'
import { useRouter } from 'next/navigation.js'
import './index.scss'
@@ -29,7 +28,6 @@ export const LoginForm: React.FC<{
routes: { admin, api },
} = config
const router = useRouter()
const { t } = useTranslation()
const prefillForm = autoLogin && autoLogin.prefillOnly
@@ -54,10 +52,7 @@ export const LoginForm: React.FC<{
disableSuccessStatus
initialState={initialState}
method="POST"
onSuccess={() => {
router.push(admin)
}}
redirect={typeof searchParams?.redirect === 'string' ? searchParams.redirect : ''}
redirect={typeof searchParams?.redirect === 'string' ? searchParams.redirect : admin}
waitForAutocomplete
>
<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,
}}
>
<FieldError CustomError={CustomError} {...(errorProps || {})} />
<FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
<FieldError CustomError={CustomError} {...(errorProps || { path })} />
<FieldLabel CustomLabel={CustomLabel} {...(labelProps || { path })} />
<div>
{BeforeInput}
<input

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

@@ -67,8 +67,8 @@ const PasswordField: React.FC<PasswordFieldProps> = (props) => {
width,
}}
>
<FieldError CustomError={CustomError} {...(errorProps || {})} />
<FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
<FieldError CustomError={CustomError} {...(errorProps || { path })} />
<FieldLabel CustomLabel={CustomLabel} {...(labelProps || { path })} />
<input
autoComplete={autoComplete}
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 message = messageFromProps || errorMessage
const showMessage = showErrorFromProps || (hasSubmitted && !valid)
const showMessage = showErrorFromProps || (hasSubmitted && valid === false)
if (showMessage) {
return (

93
tsconfig.json
View File

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