Tag input

"use client";

import { useCallback, useId, useRef, useState } from "react";
import type { ChangeEvent, ComponentProps, KeyboardEvent, ReactNode, Ref } from "react";
import "./tag-input.css";

export type TagInputProps = Omit<ComponentProps<"input">, "value" | "defaultValue" | "name" | "type"> & {
  /** Visible label. */
  label: ReactNode;
  /** Help text under the control, linked with aria-describedby. */
  hint?: ReactNode;
  /** Error text. When set, the input is marked invalid and the text is announced with it. */
  error?: ReactNode;
  /** Controlled list of tags. */
  value?: string[];
  /** Uncontrolled starting list of tags. */
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
  /** Submits each tag as its own hidden field under this name. */
  name?: string;
};

/** True when there is something to render; false, null and "" count as nothing. */
function present(node: ReactNode): boolean {
  return node != null && node !== false && node !== "";
}

function setRefs<T>(node: T, ...refs: (Ref<T> | undefined)[]) {
  for (const ref of refs) {
    if (typeof ref === "function") ref(node);
    else if (ref) ref.current = node;
  }
}

export function TagInput({
  label,
  hint,
  error,
  value,
  defaultValue = [],
  onValueChange,
  name,
  className,
  style,
  id,
  disabled,
  readOnly,
  ref,
  onChange,
  onKeyDown,
  "aria-describedby": describedBy,
  "aria-invalid": ariaInvalid,
  ...rest
}: TagInputProps) {
  const autoId = useId();
  const inputId = id ?? autoId;
  const hintId = `${autoId}-hint`;
  const errorId = `${autoId}-error`;
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [inner, setInner] = useState(defaultValue);
  const [draft, setDraft] = useState("");
  const [message, setMessage] = useState("");
  const tags = value ?? inner;
  const mergedRef = useCallback((node: HTMLInputElement | null) => setRefs(node, inputRef, ref), [ref]);
  const locked = disabled || readOnly;

  function update(next: string[]) {
    if (value === undefined) setInner(next);
    onValueChange?.(next);
  }

  /** Adds each new, non-empty entry and announces the result. Returns true if any entry was a duplicate. */
  function add(entries: string[], list: string[]) {
    let next = list;
    const added: string[] = [];
    const repeated: string[] = [];
    for (const raw of entries) {
      const tag = raw.trim();
      if (!tag) continue;
      if (next.some((t) => t.toLowerCase() === tag.toLowerCase())) repeated.push(tag);
      else {
        next = [...next, tag];
        added.push(tag);
      }
    }
    if (added.length) update(next);
    const parts: string[] = [];
    if (added.length) parts.push(`Added ${added.join(", ")}.`);
    if (repeated.length) parts.push(`${repeated.join(", ")} ${repeated.length > 1 ? "are" : "is"} already added.`);
    if (parts.length) setMessage(parts.join(" "));
    return repeated.length > 0;
  }

  function remove(tag: string) {
    update(tags.filter((t) => t !== tag));
    setMessage(`Removed ${tag}.`);
  }

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    onChange?.(event);
    const text = event.currentTarget.value;
    // A comma, typed or pasted, ends a tag. This also covers mobile keyboards,
    // which often send no usable key for it.
    if (text.includes(",")) {
      const parts = text.split(",");
      const tail = parts.pop() ?? "";
      add(parts, tags);
      setDraft(tail.trimStart());
    } else {
      setDraft(text);
    }
  }

  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented || locked || event.nativeEvent.isComposing) return;
    if (event.key === "Enter") {
      // Never submit the surrounding form from here; Enter belongs to the tag.
      event.preventDefault();
      const rejected = add([draft], tags);
      if (!rejected) setDraft("");
    } else if (event.key === "Backspace" && draft === "" && tags.length > 0) {
      event.preventDefault();
      remove(tags[tags.length - 1]);
    }
  }

  return (
    <div className={["eq-tag-input", className].filter(Boolean).join(" ")} style={style}>
      <label className="eq-tag-input-label" htmlFor={inputId}>
        {label}
      </label>
      <div
        className="eq-tag-input-control"
        data-disabled={disabled || undefined}
        onMouseDown={(event) => {
          // A press on the box itself, between tags, puts the caret in the field.
          if (event.target === event.currentTarget && !disabled) {
            event.preventDefault();
            inputRef.current?.focus();
          }
        }}
      >
        {tags.length > 0 && (
          <ul className="eq-tag-input-list" aria-label="Added">
            {tags.map((tag) => (
              <li key={tag} className="eq-tag-input-tag">
                <span className="eq-tag-input-tag-label">{tag}</span>
                {!locked && (
                  <button
                    type="button"
                    className="eq-tag-input-remove"
                    aria-label={`Remove ${tag}`}
                    onClick={() => {
                      remove(tag);
                      // The button is about to disappear; keep focus in the field.
                      inputRef.current?.focus();
                    }}
                  >
                    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
                      <path d="M4.5 4.5l7 7M11.5 4.5l-7 7" />
                    </svg>
                  </button>
                )}
                {name && <input type="hidden" name={name} value={tag} disabled={disabled} />}
              </li>
            ))}
          </ul>
        )}
        <input
          autoComplete="off"
          enterKeyHint="enter"
          {...rest}
          ref={mergedRef}
          id={inputId}
          className="eq-tag-input-input"
          type="text"
          aria-describedby={
            [describedBy, present(hint) ? hintId : null, present(error) ? errorId : null].filter(Boolean).join(" ") ||
            undefined
          }
          aria-invalid={present(error) ? true : ariaInvalid}
          disabled={disabled}
          readOnly={readOnly}
          value={draft}
          onChange={handleChange}
          onKeyDown={handleKeyDown}
        />
      </div>
      {present(hint) && (
        <p className="eq-tag-input-hint" id={hintId}>
          {hint}
        </p>
      )}
      {present(error) && (
        <p className="eq-tag-input-error" id={errorId}>
          {error}
        </p>
      )}
      <div className="eq-tag-input-status" role="status" aria-live="polite">
        {message}
      </div>
    </div>
  );
}