Reactで、タグを入力して並べる入力欄を作る方法

import { useId, useRef, useState } from 'react';

type Props = {
  label: string;
  tags: string[];
  onChange: (tags: string[]) => void;
};

// 「,」「、」や改行で区切って、前後の空白を取り、空のものを除く
export function splitTags(text: string) {
  return text
    .split(/[,、\n]/)
    .map((t) => t.trim())
    .filter(Boolean);
}

export function TagInput({ label, tags, onChange }: Props) {
  const [text, setText] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);
  const id = useId();

  function addTags(candidates: string[]) {
    const next = [...tags];
    for (const tag of candidates) {
      // 大文字と小文字だけが違うものも、同じタグとして扱う
      if (!next.some((t) => t.toLowerCase() === tag.toLowerCase())) next.push(tag);
    }
    if (next.length !== tags.length) onChange(next);
    setText('');
  }

  function removeTag(index: number) {
    onChange(tags.filter((_, i) => i !== index));
    // 押した削除ボタンは消えるので、入力欄にフォーカスを戻す
    inputRef.current?.focus();
  }

  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
    // 日本語の変換中のキーは、変換の操作として IME に任せる
    if (e.nativeEvent.isComposing || e.keyCode === 229) return;
    if (e.key === 'Enter' || e.key === ',') {
      // フォームの送信と、「,」が入力欄に入るのを止める
      e.preventDefault();
      addTags(splitTags(text));
    } else if (e.key === 'Backspace' && text === '' && tags.length > 0) {
      removeTag(tags.length - 1);
    }
  }

  function handlePaste(e: React.ClipboardEvent<HTMLInputElement>) {
    const pasted = e.clipboardData.getData('text');
    // 区切りを含む文字列を貼り付けたときだけ、まとめてタグにする
    if (!/[,、\n]/.test(pasted)) return;
    e.preventDefault();
    addTags(splitTags(text + pasted));
  }

  return (
    <div className="field">
      <label htmlFor={id}>{label}</label>
      <div className="tag-input" onClick={() => inputRef.current?.focus()}>
        <ul className="tags">
          {tags.map((tag, i) => (
            <li key={tag} className="tag">
              {tag}
              <button type="button" aria-label={`${tag} を削除`} onClick={() => removeTag(i)}>
                ×
              </button>
            </li>
          ))}
        </ul>
        <input
          id={id}
          ref={inputRef}
          value={text}
          onChange={(e) => setText(e.target.value)}
          onKeyDown={handleKeyDown}
          onPaste={handlePaste}
          placeholder={tags.length === 0 ? 'Enter か , で追加' : ''}
        />
      </div>
    </div>
  );
}

.tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid #9aa5ab;
  border-radius: 6px;
}
.tag-input:focus-within {
  border-color: #00c8e8;
  outline: 2px solid #b8eef7;
}
.tags {
  display: contents;
  list-style: none;
}
.tag-input input {
  flex: 1;
  min-width: 8em;
  border: 0;
  outline: none;
}

「react」と入力して Enter: タグ ["react"] / 入力欄「」
「typescript」と入力して ,: タグ ["react","typescript"] / 入力欄「」
「React」と入力して Enter: タグ ["react","typescript"] / 入力欄「」
空白だけを入力して Enter: タグ ["react","typescript"] / 入力欄「」
「  vite  」と入力して Enter: タグ ["react","typescript","vite"] / 入力欄「」

isComposing を見る書き方（この記事の書き方）
届いた keydown: Enter(isComposing=true, keyCode=13)
「ねこ」を「猫」に変換して Enter で確定: タグ [] / 入力欄「猫」
もう一度 Enter: タグ ["猫"] / 入力欄「」

isComposing を見ない書き方
届いた keydown: Enter(isComposing=true, keyCode=13)
「ねこ」を「猫」に変換して Enter で確定: タグ ["猫"] / 入力欄「猫」

「ab」と入力して Backspace: タグ ["react","typescript","vite"] / 入力欄「a」
もう一度 Backspace（入力欄が空になる）: タグ ["react","typescript","vite"] / 入力欄「」
入力欄が空のときに Backspace: タグ ["react","typescript"] / 入力欄「」

フォーカスを戻さない書き方
「vite を削除」をクリック: タグ ["react"] / 入力欄「」 / フォーカス BODY
続けて「hooks」とキーを打つ: タグ ["react"] / 入力欄「」 / フォーカス BODY

この記事の書き方
「vite を削除」をクリック: タグ ["react"] / 入力欄「」 / フォーカス INPUT
続けて「hooks」とキーを打つ: タグ ["react"] / 入力欄「hooks」 / フォーカス INPUT

「猫, 写真、 TypeScript\nhooks,,」を貼り付け: タグ ["typescript","猫","写真","hooks"] / 入力欄「」
区切りのない「useState」を貼り付け: タグ ["typescript","猫","写真","hooks"] / 入力欄「useState」
続けて Enter: タグ ["typescript","猫","写真","hooks","useState"] / 入力欄「」

import { useState } from 'react';
import { TagInput } from './TagInput';

export function App() {
  const [tags, setTags] = useState<string[]>([]);
  const [sent, setSent] = useState('');

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    setSent(JSON.stringify(data.getAll('tags')));
  }

  return (
    <form onSubmit={handleSubmit}>
      <TagInput label="タグ" tags={tags} onChange={setTags} />
      {/* フォームの値として送るために、タグを1つずつ hidden の input に入れる */}
      {tags.map((tag) => (
        <input key={tag} type="hidden" name="tags" value={tag} />
      ))}
      <p className="count">{tags.length}個のタグ</p>
      <button type="submit">保存</button>
      <output>{sent}</output>
    </form>
  );
}

「react」と入力して Enter: タグ ["react"] / 入力欄「」 / 送信 1回
「vite」と入力して ,: タグ ["react","vite"] / 入力欄「,」 / 送信 1回