sersavan / shadcn-multi-select-component Goto Github PK

I tried to implement lazyloading by requesting data from BE upon typing in the search input
new data doesn't get rendered until i close the popover and reopen it

I tried implementing a clear button for the form in which I'm using the multiselect component.
I used onClick={() => {form.reset();}} for this clear button and the multiselect field is the only one not being cleared.

(By the way thank you for this amazing component).

My Setup

First, thanks you.
As we need to style component according to own design. I am unable to customize style of this compoent.
Here is my code,

 <FormField
            control={form.control}
            name="sizes"
            render={({ field }) => (
              <FormItem>
                {/* <FormLabel>Select size</FormLabel> */}
                <FormControl>
                  <MultiSelectFormField
                    options={sizesList}
                    defaultValue={field.value}
                    onValueChange={field.onChange}
                    placeholder="Select sizes"
                    className="h-30 max-w-[300px] shadow-none"
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

      Please help me to customize this component

i need to something like this.. to have control under your multi select component

<Form {...form}>
              <form
                onSubmit={form.handleSubmit(onHandleSubmit)}
                className="space-y-4"
              >
                <FormField
                  control={form.control}
                  name="authors"
                  render={({ field: { ...field } }) => (
                    <FormItem className="mb-5">
                      <FormLabel>Author</FormLabel>
                      <MultiSelect
                        selected={field.value}
                        options={authorsData}
                        {...field} />
                    </FormItem>
                  )}
                />
                <Button type="submit" className="w-full">
                  Continue
                </Button>
              </form>
            </Form>
            ```

I'm experiencing an issue where I'm unable to use the scroll mouse wheel and scroll touch on a mobile phone. This issue persists across various browsers and devices.

Hello @sersavan !

first of all, thanks for share your component!

im trying to use it without defaultValues, but have useEffect to update state on first render and it is causing a error when
defaultValues doesnt exist, causing error:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

If i try to pass a empty string, i have empty component on UI as image below.

const form = useForm<Example>({
  resolver: zodResolver(exampleSchema),
  defaultValues: {},
});

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-2">
    <FormField
      control={form.control}
      name="example"
      render={({ field }) => (
        <FormItem className="mb-5">
          <FormControl>
            <MultiSelect
              options={[
                { value: 'example', label: 'Example' },
              ]}
              onValueChange={field.onChange}
              defaultValue={field.value}
              placeholder="Example"
              variant="inverted"
              animation={2}
              maxCount={3}
            />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  </form>
</Form>

Dependencies

"react": "^18.3.1",
"react-hook-form": "^7.53.0",
"react-dom": "^18.3.1",
"next": "^14.2.7",
"@hookform/resolvers": "^3.9.0",
"@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-checkbox": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-radio-group": "^1.2.0",
"@radix-ui/react-scroll-area": "^1.1.0",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",

I don't know whats going on here but it looks mouse click is not working with React Hook Forms but keyboards button seems to be working

Hi, I got disabled popover like below from the image. I can't click on anything. It seems CommandItem components from shadcn got applied data-disabled attribute set to false. I have no idea how to solve it in the code, but I manage to remove that attribute from the inspect the items can be clickable again.

Great work. I managed to resolve the TS error I get with my NextJS [14] project

What you think?

    const toggleOption = (value: string) => {
      if (selectedValuesSet.current.has(value)) {
        selectedValuesSet.current.delete(value);
        setSelectedValues(selectedValues.filter((v) => v !== value));
      } else {
        selectedValuesSet.current.add(value);
        setSelectedValues([...selectedValues, value]);
      }
      onValueChange(Array.from(selectedValuesSet.current));
    };

While implementing the MultiSelect component using controlled form, I noticed a minor issue in the useEffect hook that can arise during the initial mounting phase. The intention appears to be synchronizing the selectedValues state with the defaultValue prop.

However, there's an error that can prevent this synchronization from happening correctly when the component first mounts.

Currently, if defaultValue is already set when the component mounts and it differs from the initial value of selectedValues (which is an empty array), the useEffect will detect this discrepancy.

However, the subsequent setSelectedValues(selectedValues); maintains the existing selectedValues instead of updating it to the defaultValue.

React.useEffect(() => {
  if (JSON.stringify(selectedValues) !== JSON.stringify(defaultValue)) {
    setSelectedValues(selectedValues);
  }
}, [defaultValue, selectedValues]);

To fix my problem I've simply set the selected values to the defaultValue

React.useEffect(() => {
  if (JSON.stringify(selectedValues) !== JSON.stringify(defaultValue)) {
    setSelectedValues(defaultValue);
  }
}, [defaultValue, selectedValues]);

Hi! I am quite satisfied the work you have done :)
I'd like to say thanks to you first.

Btw, I need some additional functionalities!

My specific use cases are,

1. I need to disable specific option(s) initially.
2. In the context of 1. I cannot interact with the disabled option(s) by clicking itself(themselves) or UI elements like 'Clear' button, 'x' icon button, '(Select All)' option item in the list. Even if I click that, there should be no effect on disabled option(s).

I think I am able to implement this functionality in a few hrs. If you don't mind letting me contribute to this functionality, please let me know how to do that!

Hey, I just want to let you know there's something wrong with overflow when you use this component in shadcn/dialog. Scroll is not working.

Take care!

[Updated] Nevermind, I haven't noticed modalPopover option before. Please, delete it. Take care!