[feat]: button for adding a new tag and not only with Enter key

[Steveb599]

Feature description

Hey I tried to implement that myself but the currentInput is still visisble after adding the plus icon.. Requesting for button for adding a new tag, or a clue how to fix my issue.

  const [tags, setTags] = useState<Tag[]>(properties || []);
  const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
  const [currentInput, setCurrentInput] = useState('');

  const handleTagsChange = (newTags: SetStateAction<Tag[]>) => {
    setTags(newTags);
    const actualTags = typeof newTags === 'function' ? newTags(tags) : newTags;

    setValue(
      'properties',
      actualTags.map((tag) => tag.text),
    );
  };

  const handleAddTag = () => {
    if (currentInput.trim()) {
      handleTagsChange([...tags, { id: crypto.randomUUID(), text: currentInput.trim() }]);
      setCurrentInput('');
    }
  };

return (
      <FormField
        control={control}
        name="properties"
        render={({ field }) => (
          <FormItem>
            <div className="relative">
              <FormControl>
                <TagInput
                  {...field}
                  styleClasses={{
                    inlineTagsContainer:
                      'border-input rounded-lg bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 p-1 gap-1 pl-20',
                    input:
                      'w-full min-w-[80px] focus-visible:outline-none shadow-none px-2 h-7',
                    tag: {
                      body: 'h-7 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs px-2 pe-7',
                      closeButton:
                        'absolute -inset-y-px -end-px p-0 rounded-e-lg flex size-7 transition-colors outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 text-muted-foreground/80 hover:text-foreground',
                    },
                  }}
                  tags={tags}
                  className="sm:min-w-[450px]"
                  setTags={handleTagsChange}
                  activeTagIndex={activeTagIndex}
                  setActiveTagIndex={setActiveTagIndex}
                  onInputChange={setCurrentInput}
                  value={currentInput}
                />
              </FormControl>
              <div
                className={`absolute left-2 top-1/2 -translate-y-1/2 transition-all duration-300 ${
                  isVisible ? 'scale-100 opacity-100' : 'scale-95 opacity-0'
                }`}
              >
                {currentInput && (
                  <Button
                    type="button"
                    onClick={handleAddTag}
                    size="icon"
                    variant="ghost"
                    className="h-7 w-7"
                  >
                    <Plus className="h-4 w-4 " />
                  </Button>
                )}
              </div>
            </div>
            <FormMessage />
          </FormItem>
        )}
      />

)

Additional Context

No response

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues and PRs