When I used the Form component and select (multiple selection mode) component together, unexpected situations occurred.

[FerretAngel]

When I use multiple selection mode and form together, the form can only collect single data. And the value I bound is a label. The select component still submitted a key as a value...

tagSelectCode

'use client';
import { useEffect, useState } from 'react';
import { getTags } from '@/api/article';
import { Select, SelectItem, SelectProps } from '@nextui-org/react';

export default function TagSelect(props: Omit<SelectProps, 'children'>) {
  const [tags, setTags] = useState<Entity.Tag[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    getTags()
      .then((res) => {
        setTags(res);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  return (
    <Select
      label="标签"
      selectionMode="multiple"
      isLoading={loading}
      isDisabled={loading}
      {...props}
    >
      {tags.map((tag) => (
        <SelectItem key={tag.id} value={tag.label}>
          {tag.label}
        </SelectItem>
      ))}
    </Select>
  );
}

formCode

'use client';
import { CreateArticleDto } from '@/api/article';
import { Form, Button, Input, Switch } from '@nextui-org/react';
import { FormEvent, useState } from 'react';
import TagSelect from './tagSelect';

const formReg = {
  title: {
    reg: /^.{1,256}$/,
    message: '标题长度在1-256个字符',
  },
  profile: {
    reg: /^.{1,256}$/,
    message: '简介长度在1-256个字符',
  },
  content: {
    reg: /^.+$/,
    message: '内容不能为空',
  },
} as const;

interface SaveFormProps {
  content: string;
}

export default function SaveForm({ content }: SaveFormProps) {
  const [errors, setErrors] = useState<Record<string, string>>({});

  const submitValidator = (data: Record<string, any>) => {
    const errors: Record<string, string> = {};
    Object.entries(formReg).forEach(([key, value]) => {
      if (!data[key]) {
        errors[key] = value.message;
      }
    });
    setErrors(errors);
    return Object.keys(errors).length > 0;
  };

  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const data = Object.fromEntries(formData.entries());
    console.log(e, data);
    const hasErrors = submitValidator(data);
    if (hasErrors) {
      return;
    }
    console.log(e);
  };
  return (
    <Form onSubmit={onSubmit} validationErrors={errors}>
      <Input isRequired type="text" label="标题" name="title" />
      <Input isRequired type="text" label="简介" name="profile" />
      <Input isRequired type="text" label="总结" name="summary" />
      <Input
        className="hidden"
        isRequired
        hidden
        type="text"
        label="内容"
        name="content"
        defaultValue={content}
      />
      <TagSelect
        name="tags"
        label="标签"
        onChange={(e) => {
          console.log(e);
        }}
        onSelectionChange={(e) => {
          console.log(e);
        }}
      />
      <Button type="submit">保存</Button>
    </Form>
  );
}

[lmiklosko]

I'd say this is a basic functionality you'd expect from select. There is no mention in the docs it should not work. Do we have an ETA on this @jrgarciadev ?

[jrgarciadev]

@wingkwong

[wingkwong]

@lmiklosko I couldn't reproduce the issue. Could you please share a sandbox? Also you may check out https://www.heroui.com/docs/components/select#using-value-attribute-in-option.

demo: https://heroui.chat/chat/e89e8d6d-e975-4332-b4a4-cddaa75c58f9

[lmiklosko]

Hi @wingkwong, this should be minimal reproducible code sample (Sorry might not look great but not much time to do anything else - should at least reproduce the behavior). Notice the name field in json seems to be a last selected string.

[lmiklosko]

Okay nevermind, its not an issue of the component itself as formData contains duplicate entries per selected item. Its the Object.fromEntries that takes only the last one! @FerretAngel you'll probably have something like this somewhere in the code as well.

Apologies for the inconvenience :) but glad it got solved.

Side note, the code snippet you shared dit not actually submitted a form but it used selectedSkills state to fill the data later on! Sometimes its not good to rely on AI for this kinds of stuff tho.