Next.js Discord

Discord Forum

NextUI bug?

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
I'm populating the form with default values and I get this, am I doing it wrong? I'm using react hook forms

46 Replies

@Asiatic Lion I'm populating the form with default values and I get this, am I doing it wrong? I'm using react hook forms
White-winged Scoter
Are you talking about the UI or are you getting errors?
And if it's the UI send a screenshot of your JSX
@Asiatic Lion I'm populating the form with default values and I get this, am I doing it wrong? I'm using react hook forms
Maheśvara
We need to see how you're making use of your components to know if you're doing things correctly.
I also use NextUI inputs for my React hook form and it works just fine.
Maheśvara
Yeah
Asiatic LionOP
Maheśvara
I use the shadcn implementation of RHF, but it works fine for me
@White-winged Scoter Are you talking about the UI or are you getting errors?
Asiatic LionOP
the UI, i get those weird placeholders, if I hover them the values disappear
@Asiatic Lion the UI, i get those weird placeholders, if I hover them the values disappear
White-winged Scoter
your using label instead of Placeholder
Change label="Job title" to placeholder="Job title"
And do that for each input
labels don't go away after input, placeholders do.
Make sense?
Asiatic LionOP
yeah but i want the value to stay
so i can just edit it
White-winged Scoter
Ah
Asiatic LionOP
:PPPPPPPP
i did it there, but in a different way where i get some wasted re-renders
i'm working in the HR now
deleted the link
White-winged Scoter
Ah
Okay so
in your css
you can detect if an input has anything in it by doing
White-winged Scoter
input:not([value =""]) {
    line-height: 20px;
}
Sorry that took me so long, I wanted to test to see if it works
Maheśvara
This is how I do it on mine, note I use the <Form> component from RHF because I use the shadcn implementation:

I define my form here, the custom hook I have here is just a simple hook that sets the schema provided and the zod resolver.
  const form = useForm<Schema>({
    resolver: zodResolver(Schema),
    mode: "onTouched",
    defaultValues: {
      name: "",
      email: "",
      password: "",
      confirmPassword: "",
    },
  });


Then I use a nextui input field like the following:
  <FormField
    control={form.control}
    name="name"
    render={({ field }) => (
      <FormItem>
        <FormControl>
          <Input
            label="Name"
            radius="sm"
            size="sm"
            type="text"
            isInvalid={form.getFieldState("name").invalid}
            {...field}
          />
        </FormControl>
        <FormMessage />
      </FormItem>
    )}
  />
When I update defaultValues, the respective field updates.
you can try a more controlled state variant also, I think that works without issues too
Asiatic LionOP
coool is it better than the original RHF?? I think it doesn't work properly with nextui inputs, i tried normal inputs and they workk
i'll save your code for when i learn the shad RHF
@White-winged Scoter css input:not([value =""]) { line-height: 20px; }
Asiatic LionOP
cool but i think it's an issue with the input from nextui
when i hover the default values they disappear lol
it could be a label or placeholder
White-winged Scoter
ah
Maheśvara
@Asiatic Lion forgot you for a bit, did you try setting the defaultValue prop on Input?
Something like:
<Input
  label="Name"
  radius='sm'
  size='sm'
  variant="bordered"
  defaultValue={name}
  {...field}
/>
Maheśvara
Backing up for a bit, you imported from @nextui-org/input right?
Just making sure you have all the other basic things setup
@Maheśvara Backing up for a bit, you imported from `@nextui-org/input` right?
Asiatic LionOP
I just installed everything
Maheśvara
I import from the specific packages
That's how they recommend to do it on their site
Even if you do install everything, import everything from the specific package
Asiatic LionOP
yeah i should do that