[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

[Aymen-Khanfir]

Hello @Steveb599 ,

Hope you're doing well!

I'm currently using TanStack Form with Zod, but you can adapt this pattern if you want to provide a separate "Add" button for tags instead of relying solely on the ENTER key delimiter.

Here’s a working example using TagInput from emblor, along with a custom button to add tags manually:

'use client';
import { Tag, TagInput, TagInputProps } from 'emblor';
import React, { useId, useState, useEffect } from 'react';

import { PlusIcon } from 'lucide-react';

import { cn } from '@/lib/utils';

import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';

import { useFieldContext } from '.';
import { FieldErrors } from './field-errors';

interface TextFieldWithInnerTagsProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  labelClassName?: string;
  required?: boolean;
  showSeparateAddButton?: boolean;
  tagInputProps?: TagInputProps;
}

export const TextFieldWithInnerTags = ({
  label,
  labelClassName,
  required = true,
  showSeparateAddButton = false,
  tagInputProps,
}: TextFieldWithInnerTagsProps) => {
  const field = useFieldContext<string[]>();
  const [tagsData, setTagsData] = useState<Tag[]>([]);
  const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
  const [tagInputValue, setTagInputValue] = useState<string>('');
  const id = useId();

  useEffect(() => {
    if (tagsData.length > 0) {
      field.setValue(tagsData.map((tag) => tag.text));
    }
  }, [field, tagsData]);

  const addTag = () => {
    const existingTag = tagsData.find(
      (tag) => tag.text === tagInputValue.trim()
    );

    if (existingTag || tagInputValue.trim() === '') {
      setTagInputValue('');
      return;
    }

    const newTag: Tag = {
      id: id,
      text: tagInputValue.trim(),
    };

    setTagsData((prev) => [...prev, newTag]);
    setTagInputValue('');
  };

  return (
    <div className='space-y-2'>
      <div className='grid gap-2'>
        <Label htmlFor={field.name} className={cn(labelClassName)}>
          {label}
          {required && <span className='ms-0.5 text-destructive'>*</span>}
        </Label>

        <div className='flex gap-2'>
          <TagInput
            id={field.name}
            tags={tagsData}
            setTags={(newTags) => {
              setTagsData(newTags);
              setTagInputValue('');
            }}
            onTagRemove={(tag) => {
              const tagIndex = tagsData.findIndex((t) => t.text === tag);
              field.setValue((tagsData) =>
                tagsData.filter((_, index) => index !== tagIndex)
              );
            }}
            onInputChange={(value) => {
              setTagInputValue(value);
            }}
            inputProps={{
              value: tagInputValue,
            }}
            activeTagIndex={activeTagIndex}
            setActiveTagIndex={setActiveTagIndex}
            onBlur={field.handleBlur}
            inputFieldPosition='top'
            inlineTags={false}
            styleClasses={{
              tagList: {
                container: 'gap-1',
              },
              input:
                'rounded-md transition-[color,box-shadow] placeholder:text-muted-foreground/70 focus-visible:border-ring outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
              tag: {
                body: 'relative h-7 bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7',
                closeButton:
                  'absolute -inset-y-px -end-px p-0 rounded-s-none rounded-e-md flex size-7 transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] text-muted-foreground/80 hover:text-foreground',
              },
            }}
            {...tagInputProps}
          />
          <Button
            type='button'
            variant='outline'
            className={cn(
              'rounded-xl bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700',
              {
                hidden: !showSeparateAddButton,
              }
            )}
            iconStart={<PlusIcon className='size-4' />}
            onClick={addTag}
          >
            Add
          </Button>
        </div>
      </div>
      <FieldErrors meta={field.state.meta} />
    </div>
  );
};

Let me know if you want a version with controlled form integration or if you need help adapting it to your setup.