Unhandled Runtime Error with Autofill on Multi-Selector

[zammitjohn]

Environment

• Browser: Safari 17.5

Description

When attempting to use the autofill feature with a multi-selector as an email field, the application throws an unhandled runtime error.

Error Message

Unhandled Runtime Error
TypeError: Array.from requires an array-like object - not null or undefined

Steps to Reproduce

1. Navigate to the multi-selector email field.
2. Initiate the autofill browser feature.
3. Observe the error as the autofill process begins.

Expected Behavior

The autofill should populate the multi-selector email field without any errors.

Actual Behavior

The application throws a TypeError, indicating that Array.from is called with a null or undefined argument.

Demo

https://github.com/hsuanyi-chou/shadcn-ui-expansions/assets/64637336/f3aab4e5-cbcd-4632-9faa-75bca4c922cb

Minimal example

"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 { Input } from "@/components/ui/input";
import MultipleSelector from "@/components/ui/multiple-selector";

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

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

const MultipleSelectorWithForm = () => {
  const form = useForm<z.infer<typeof FormSchema>>({
    defaultValues: {
      email: [{ label: "test@gmail.com", value: "test@gmail.com" }],
    },
    resolver: zodResolver(FormSchema),
  });

  return (
    <Form {...form}>
      <form className="w-2/3 space-y-6">
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Name</FormLabel>
              <FormControl>
                <Input placeholder="Name" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Emails</FormLabel>
              <FormControl>
                <MultipleSelector
                  {...field}
                  placeholder="Enter email"
                  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;

[hsuanyi-chou]

Well, I can not trigger auto-fill in my Safari... I am still trying how to trigger it. 😓

[zammitjohn]

Hey 👋 @hsuanyi-chou! Ensure you have Auto Fill web forms enabled in Safari settings, and a personal contact (with email) added.

[zammitjohn]

Have you managed to reproduce it @hsuanyi-chou?

[hsuanyi-chou]

The safari setting is the same as yours. But still not showing 😥 Maybe related to the label.

Kinda busy this sprint at work. I'll check it out soon.

[hsuanyi-chou]

I can't show the right-icon in the input like your video.

I copied your code and manually right-click to trigger 'auto-fill' and select a value from Contact. (name or email in contact) Both name and e-mail fields do not show any errors and set the value to the input.

I checked the MultipleSelector that I didn't use Array.from.

[zammitjohn]

It is not reproducible that way, only from the right icon in field (for whatever reason). Seems like an issue with the Command menu component that MultipleSelector uses. I resolved the issue by downgrading the version of cmdk to "0.2.0", as discussed here: https://github.com/shadcn-ui/ui/issues/3051

"cmdk": "0.2.0",

Autofill works without issues now.