You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When the validate function returns an error, it gets stuck showing that first error, even if the user types new content. This is misleading when the user fixes one issue but has another issue that the validation function is catching.
To Reproduce
Set up an input like this and publish to trigger validation on typing. Then type 12345 in the input. When you get to 3, it shows Error number 3 as expected. But then typing subsequent characters doesn't update the displayed error, even though the logs show the validate function returns different errors.
{name: `test`,label: `Test`,type: 'text',validate: async(data: string)=>{if(!data||data.length<3){returntrue;}consterrStr=`Error number ${data.length} `;console.log(errStr);returnerrStr;},},
Payload Version
2.16.1
Adapters and Plugins
@payloadcms/richtext-slate 1.5.2
The text was updated successfully, but these errors were encountered:
I can get around this by watching my inputs and manually calling validateForm each time, though this isn't very intuitive as a solution. More context in this discord thread.
functionstartValidation(formHookResult: ReturnType<typeofuseForm>){const{ formRef, setSubmitted, validateForm }=formHookResult;setSubmitted(true);// make sure we have the monaco editor textarea element on the page, and add an event listenerif(formRef.current){constinputFields=Object.values(formRef.current).filter((el)=>el.id==='field-subject'||el.className==='inputarea monaco-mouse-cursor-text',);// if we have inputs, add an event listener on input and call validateForm manuallyif(inputFields.length){inputFields.forEach((field)=>{// we call validateForm in the next tick so the value has been updatedfield.addEventListener('input',()=>setTimeout(()=>voidvalidateForm()));});}}// if the above failed, do it again in a secondsetTimeout(()=>startValidation(formHookResult),1000);}
and
// This is an invisible element that exists only to trigger the form's validate-upon-input behavior.{type: 'ui',name: 'form-validation-trigger',admin: {components: {Field: ()=>{// `setSubmitted` seems to mainly be for handling the validation behavior of the form on input.// By setting to true, the form will validate the fields on input, which is the behavior we want.// Otherwise, it only validates on input after clicking "Publish" (Save Draft doesn't trigger validation)constformHookResult=useForm();startValidation(formHookResult);returnnull;},},},},
Link to reproduction
No response
Describe the Bug
When the validate function returns an error, it gets stuck showing that first error, even if the user types new content. This is misleading when the user fixes one issue but has another issue that the validation function is catching.
To Reproduce
Set up an input like this and publish to trigger validation on typing. Then type
12345
in the input. When you get to3
, it showsError number 3
as expected. But then typing subsequent characters doesn't update the displayed error, even though the logs show the validate function returns different errors.Payload Version
2.16.1
Adapters and Plugins
@payloadcms/richtext-slate 1.5.2
The text was updated successfully, but these errors were encountered: