Issue with Creatable Multi-Selector Box Not Creating First Item

[zammitjohn]

Environment

• Browser: Safari 17.5

Description

I'm encountering an issue with a multi-selector box that has creatable options and a value set. When I attempt to create the first item, it does not get created. However, when I try to enter the same item again, it works as expected.

<MultipleSelector
  {...field}
  value={emailOptions}
  placeholder="Email Address"
  creatable
/>

Steps to Reproduce

1. Go to the multi-selector box with creatable options.
2. Try to create a new item as the first entry.
3. Observe that the item is not created.
4. Attempt to enter the same item again.
5. Notice that the item is now created.

Expected Behavior

The multi-selector box should allow the creation of a new item on the first attempt without the need to enter it again.

Actual Behavior

The first attempt to create a new item fails, but subsequent attempts succeed.

Demo

https://github.com/hsuanyi-chou/shadcn-ui-expansions/assets/64637336/7663ceec-eb8b-4d9f-bcbc-ccb0f9aa1112

[hsuanyi-chou]

Well, I use safari and it shows item correctly. I also added creatable in the form demo and it worked correctly.

Can you provide a minimal reproduce?

[zammitjohn]

Sure, minimal example below:

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import * as z from "zod";
import * as React from "react";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import MultipleSelector, { Option } from "@/components/ui/multiple-selector";

const optionSchema = z.object({
  label: z.string(),
  value: z.string(),
  disable: z.boolean().optional(),
});

const FormSchema = z.object({
  frameworks: z.array(optionSchema).min(1),
});

const MultipleSelectorWithForm = () => {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  });

  const selectedValue: Option[] = [{ label: "nextjs", value: "Nextjs" }]; // NOTE: Here I am setting const. Value is actually passed from props in my demo.

  return (
    <Form {...form}>
      <form className="w-2/3 space-y-6">
        <FormField
          control={form.control}
          name="frameworks"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Frameworks</FormLabel>
              <FormControl>
                <MultipleSelector
                  {...field}
                  value={selectedValue}
                  placeholder="Select frameworks you like..."
                  creatable
                  emptyIndicator={
                    <p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
                      no results found.
                    </p>
                  }
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </form>
    </Form>
  );
};
export default MultipleSelectorWithForm;

[zammitjohn]

Resolved by setting defaultValue via useForm hook correctly.