[BUG] - INPUT WHEN ISVALID

[fiqryx]

NextUI Version

2.3.5

Describe the bug

im trying with submit form, when input set isvalid false then cant resubmit form

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

see error

Expected behavior

as a user

Screenshots or Videos

No response

Operating System Version

windows

Browser

Chrome

[linear]

ENG-706 [BUG] - INPUT WHEN ISVALID

[wingkwong]

@Fiqry919 I'm not sure what the issue is here. When it's invalid, you can't submit the form. Can you show some code or even a video for demonstration?

[fiqryx]

sure, this a video
https://github.com/nextui-org/nextui/assets/116353477/ebff2d9b-b20c-4c64-b9bc-9017de52c5b5

[fiqryx]

this when use other version
https://github.com/nextui-org/nextui/assets/116353477/627d154e-63c6-4048-b5f3-48023b48f159

[wingkwong]

@Fiqry919 Ok now it's more clean. However, can you provide a minimal reproducible environment for us to investigate the issue?

[Moriarty47]

I'm run into this issue too.

{
"dependencies": {
    // ....
    "@nextui-org/react": "2.2.10",
    "framer-motion": "11.0.24",
    "next": "13.5.1",
    "postcss": "8.4.30",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

{
"dependencies": {
    // ....
    "@nextui-org/react": "2.3.5",
    "framer-motion": "11.0.24",
    "next": "13.5.1",
    "postcss": "8.4.30",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

Here is a minimal env

[fiqryx]

thanks

[wingkwong]

I think the reason is your validation logic resides after submit. Once the input has an invalid state, submit is blocked. In this case, you can change the state by using validate.

[Moriarty47]

Rewrite it in this way, it worked. Thanks for your help , @wingkwong .

const schema = {
  username: z
    .string()
    .min(3, 'Please input email')
    .max(30, 'Please input correct email')
    .email('Please input correct email'),
  password: z.string().min(6, 'Please input password'),
};

const validator = (key: keyof typeof schema) => (value: string) => {
  const res = schema[key].safeParse(value);
  console.log(res);
  return !res.success && res.error.issues[0].message || null;
};
const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.stopPropagation();
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const value = {
      username: formData.get('username'),
      password: formData.get('password'),
    };
    console.log(value);
    return value;
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <form onSubmit={onSubmit} className="grid gap-4 grid-cols-1 grid-rows-2">
        <Input
          name="username"
          autoComplete="email"
          required
          autoFocus
          label="Email"
          placeholder="Input your email"
          variant="bordered"
          defaultValue=""
          validate={validator('username')}
        />
        <Input
          name="password"
          label="Password"
          placeholder="Input your password"
          type="password"
          variant="bordered"
          defaultValue=""
          validate={validator('password')}
        />
        <div className="inline-flex items-start justify-between self-start gap-4 mb-4">
          <Button color="primary" type="submit">
            Sign in
          </Button>
        </div>
      </form>
    </main>
  );

[Moriarty47]

BTW, for the original validation logic, just simply add an attribute noValidate (specs here) to the form tag. It still works.

[fiqryx]

I think the reason is your validation logic resides after submit. Once the input has an invalid state, submit is blocked. In this case, you can change the state by using validate.

I don't understand why, but if there is a logic problem, it shouldn't work in other versions.
im trying with props validate is still same.
does this not work just for me

[wingkwong]

Here is a minimal env

@Moriarty47 can you share your previous version of this stackblitz link? the one to reproduce the issue. The above one got overrode.

[Moriarty47]

Ok. I think it should look something like this,

[parirox]

I'm run into this issue too.

{
"dependencies": {
    // ....
    "@nextui-org/react": "2.2.10",
    "framer-motion": "11.0.24",
    "next": "13.5.1",
    "postcss": "8.4.30",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

{
"dependencies": {
    // ....
    "@nextui-org/react": "2.3.5",
    "framer-motion": "11.0.24",
    "next": "13.5.1",
    "postcss": "8.4.30",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

Here is a minimal env

I encountered this problem, and fixed it manually by adding another helper state:

'use client'
import React, {useEffect} from 'react';
import {Input} from "@nextui-org/input";

type AppInputProps = {
    label: string,
    name: string,
    errors?: string[],
    defaultValue?: string | undefined
};

const AppInput: React.FC<AppInputProps> = ({label, name, errors, defaultValue}) => {
    // Workaround for form submission
    const [value, setValue] = React.useState<string | undefined>();
    const [changed, setChanged] = React.useState<boolean>(false);

    useEffect(() => {
        setValue(defaultValue);
        setChanged(false)
    }, [defaultValue])


    // Workaround for form submission
    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
        setValue(event.target.value);
        setChanged(true)
    }

    return (
        <div className="flex flex-col gap-3">
            <Input
                isClearable
                errorMessage={() => (
                    <ul>
                        {
                            (errors && errors.length > 0) && errors.map((error, i) => (
                                <li key={i} className="animate-appearance-in text-red-700 ps-3">{error}</li>
                            ))
                        }
                    </ul>
                )}
                isInvalid={errors && errors.length > 0 && !changed}
                label={label}
                labelPlacement="inside"
                name={name}
                type="text"
                value={value}
                onChange={handleChange} // Workaround for form submission
            />
        </div>
    );
};


export default AppInput;

and passing previous value from server action to your input:

<AppInput defaultValue={state.data?.name} errors={state.fieldErrors?.name} label="Full name" name="name"/>