[bug]: Multi-tag paste with delimiter support not working

[ioanis]

Describe the bug

The feature was added in 1.4.5, but if you inspect the PR you can see there are no actual code changes (only CHANGELOG and package.json) https://github.com/JaleelB/emblor/pull/83/files so it might have fell through the cracks

How to reproduce

Visit link https://github.com/JaleelB/emblor/pull/83/files

Link to reproduction

https://github.com/JaleelB/emblor/pull/83/files

Additional information

No response

[nckre]

It's weird, the API docs have a working example ("Add on paste") but addOnPaste is not mentioned in the API tables at the end.

In the docs, addOnPaste is wrapped inside an object

addOnPaste = {
      {
        true
      }
    }

Whereas IntelliSense tells me this should just be addOnPaste = {true}

@JaleelB Could you check this, given that it's a feature that's described in the docs?

[Chirag-kalsariya]

I don't know more but I get issue with with addOnPaste. First it take addOnPaste={true} not addOnPaste={{true}} as per the TagInputProps interface.

Here is some hack-code that work for me.

<FormField
  control={addEditProductForm.control}
  name="tags"
  render={({ field }) => (
    <FormItem className="flex flex-col items-start">
      <FormLabel className="text-left">Tags</FormLabel>
      <FormControl>
        <div
          className="w-full"
          onPaste={(e) => {
            const pastedData = e.clipboardData?.getData('text');
            if (pastedData) {
              const newTagsFromPaste = pastedData
                .split(',')
                .map(tag => tag.trim())
                .filter(tag => tag.length > 0)
                .map((tagText, index) => ({
                  id: `paste-${Date.now()}-${index}`,
                  text: tagText,
                }));
              const mergedTags = [...tags, ...newTagsFromPaste];
              setTags(mergedTags);
              setValue('tags', mergedTags as [Tag, ...Tag[]]);
              e.preventDefault();
            }
          }}
        >
          <TagInput
            styleClasses={{
              input: 'shadow-none',
            }}
            {...field}
            placeholder="Enter a tag"
            tags={tags}
            className="sm:min-w-[450px]"
            setTags={(newTags) => {
              if (Array.isArray(newTags)) {
                setTags(newTags);
                setValue('tags', newTags as [Tag, ...Tag[]]);
              }
            }}
            onInputChange={(value) => {
              handleSearchChange(value, 'tag');
            }}
            showCount={true}
            enableAutocomplete
            autocompleteOptions={tagAutocompleteOptions}
            activeTagIndex={null}
            setActiveTagIndex={() => { }}
            addOnPaste={true}
          />
        </div>
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

I using react-hook-form with zod, shadcn ui. I use div to check any kind of past event and than update tag manually.