From 3f0d0ecd5fdabf70bf67e7916120da7d003f7b6f Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Wed, 27 Mar 2024 10:48:05 -0400 Subject: [PATCH] fix(ui): prevents field errors from flashing when used outside of field props context (#5488) --- .../next/src/views/Login/LoginForm/index.tsx | 7 +- packages/ui/src/fields/Email/index.tsx | 4 +- packages/ui/src/fields/Password/index.tsx | 4 +- packages/ui/src/forms/FieldError/index.tsx | 2 +- tsconfig.json | 95 +++++-------------- 5 files changed, 28 insertions(+), 84 deletions(-) diff --git a/packages/next/src/views/Login/LoginForm/index.tsx b/packages/next/src/views/Login/LoginForm/index.tsx index 64cac34e8..d526a77fd 100644 --- a/packages/next/src/views/Login/LoginForm/index.tsx +++ b/packages/next/src/views/Login/LoginForm/index.tsx @@ -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 > diff --git a/packages/ui/src/fields/Email/index.tsx b/packages/ui/src/fields/Email/index.tsx index e3f94595a..2df01a845 100644 --- a/packages/ui/src/fields/Email/index.tsx +++ b/packages/ui/src/fields/Email/index.tsx @@ -76,8 +76,8 @@ const EmailField: React.FC = (props) => { width, }} > - - + +
{BeforeInput} = (props) => { width, }} > - - + + = (props) => { const { errorMessage, valid } = field || {} const message = messageFromProps || errorMessage - const showMessage = showErrorFromProps || (hasSubmitted && !valid) + const showMessage = showErrorFromProps || (hasSubmitted && valid === false) if (showMessage) { return ( diff --git a/tsconfig.json b/tsconfig.json index 5e34fd5bc..706245795 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -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" - ] -} \ No newline at end of file + "include": ["next-env.d.ts", ".next/types/**/*.ts", "scripts/**/*.ts"] +}