NextUI Dropdown in form as select list using React Hook Form #1061

mikevarela · 2023-03-05T05:51:47Z

mikevarela
Mar 5, 2023

Thanks for the great UI library, very excited about using it.

I'm building a form now that will contain a number of select lists, all are dynamic from DB calls. In researching how to do this I end up using a Controller. I'm having a hard time though getting anything from the selection of the select list. I'm using the Single Selection from the docs as a template. I can see the name of the field when submitting but never get a value. I think it's because I'm not exploding the name or onChange correctly but I'm stuck trying to figure it out.

import { useState, useEffect, useMemo } from "react";
import Head from "next/head";
import {
  Card,
  Grid,
  Button,
  Text,
  Input,
  Dropdown,
  Loading,
  Container,
} from "@nextui-org/react";
import { useForm, Controller } from "react-hook-form";

export default function AddTalent() {
  const [options, setOptions] = useState(null);
  const [isLoading, setLoading] = useState(false);
  const [selectedTalentType, setSelectedTalentType] = useState(
    new Set(["Talent Type"])
  );

  const selectedValue = useMemo(
    () => Array.from(selectedTalentType).join(", ").replaceAll("_", " "),
    [selectedTalentType]
  );

  const {
    register,
    handleSubmit,
    control,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => console.log(data);

  useEffect(() => {
    setLoading(true);
    const getOptions = async () => {
      try {
        const response = await fetch("/api/options/read", {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
        });
        const options = await response.json();

        setOptions(options);
        setLoading(false);
      } catch (e) {
        console.log("getOptionsError", e.message);
      }
    };
    getOptions();
  }, []);

  if (isLoading) return <Loading type="points">Loading</Loading>;
  if (!options) return <p>No data</p>;

  return (
    <>
      <Head>
        <title>Add Talent</title>
      </Head>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Card css={{ bc: "white" }}>
          <Card.Header>
            <Text>Add Talent</Text>
          </Card.Header>
          <Card.Divider />
          <Card.Body>
            {/* Talent Type */}
            <Grid.Container gap={2}>
              <Grid>
                <Controller
                  name="talent_type"
                  control={control}
                  defaultValue=""
                  render={({ field }) => (
                    <Dropdown>
                      <Dropdown.Button>{selectedValue}</Dropdown.Button>
                      <Dropdown.Menu
                        {...field}
                        aria-label="Single selection actions"
                        disallowEmptySelection
                        selectionMode="single"
                        onSelectionChange={setSelectedTalentType}
                        items={options.talentType}
                      >
                        {(item) => {
                          return (
                            <Dropdown.Item key={item.value}>
                              {item.value}
                            </Dropdown.Item>
                          );
                        }}
                      </Dropdown.Menu>
                    </Dropdown>
                  )}
                />
              </Grid>
            </Grid.Container>
            <Grid.Container gap={2}>
              <Grid xs={4}>
                <Container>
                  <Input
                    label="First Name"
                    bordered
                    width="100%"
                    {...register("first_name", {
                      required: "First name is required",
                    })}
                  />
                  {errors.first_name?.type === "required" && (
                    <Text small color="error">
                      This field is required
                    </Text>
                  )}
                </Container>
              </Grid>
              <Grid xs={4}>
                <Container>
                  <Input
                    type="text"
                    label="Last Name"
                    bordered
                    width="100%"
                    {...register("last_name", {
                      required: "Last name is required",
                    })}
                  />
                  {errors.email && (
                    <Text small color="error">
                      This field is required
                    </Text>
                  )}
                </Container>
              </Grid>
              <Grid xs={4}>
                <Container>
                  <Input
                    type="email"
                    label="Email"
                    bordered
                    width="100%"
                    {...register("email", { required: "Email is required" })}
                  />
                  {errors.email && (
                    <Text small color="error">
                      This field is required
                    </Text>
                  )}
                </Container>
              </Grid>
            </Grid.Container>
          </Card.Body>
          <Card.Divider />
          <Card.Footer>
            <Button type="submit">Submit</Button>
          </Card.Footer>
        </Card>
      </form>
    </>
  );
}

imalegonzalez · 2023-08-13T00:28:56Z

imalegonzalez
Aug 13, 2023

did you find any solution? same problem here.

0 replies

matthiasfeist · 2023-08-15T10:24:28Z

matthiasfeist
Aug 15, 2023

A proper select component seems to be in the working: #1313

0 replies

matthiasfeist-foodfacts · 2023-08-23T18:10:13Z

matthiasfeist-foodfacts
Aug 23, 2023

And the component is released!

0 replies

daylerjeff199906 · 2024-02-23T00:30:17Z

daylerjeff199906
Feb 23, 2024

did you find any solution? same problem here.

1 reply

lucianhoff Apr 14, 2024

same problem

harsh-vishwakarma · 2024-04-22T07:22:36Z

harsh-vishwakarma
Apr 22, 2024

I believe selectedKeys prop is missing, selectedKeys={selectedTalentType} needs to be added in DropdownMenu props.

<Dropdown.Menu
     {...field}
     aria-label="Single selection actions"
     disallowEmptySelection
     selectionMode="single"
     **selectedKeys={selectedTalentType}**
     onSelectionChange={setSelectedTalentType}
     items={options.talentType}
 >

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NextUI Dropdown in form as select list using React Hook Form #1061

{{title}}

Replies: 5 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

NextUI Dropdown in form as select list using React Hook Form #1061

mikevarela Mar 5, 2023

Replies: 5 comments · 1 reply

imalegonzalez Aug 13, 2023

matthiasfeist Aug 15, 2023

matthiasfeist-foodfacts Aug 23, 2023

daylerjeff199906 Feb 23, 2024

lucianhoff Apr 14, 2024

harsh-vishwakarma Apr 22, 2024

mikevarela
Mar 5, 2023

Replies: 5 comments 1 reply

imalegonzalez
Aug 13, 2023

matthiasfeist
Aug 15, 2023

matthiasfeist-foodfacts
Aug 23, 2023

daylerjeff199906
Feb 23, 2024

harsh-vishwakarma
Apr 22, 2024