✨
shadcn/uiのComboboxで検索だけではなく新規作成も行えるコンポーネントを作成する
背景
shadcn/ui のデフォルトの Combobox では検索を行えますが新規作成はできません。
ということで作成してみます。
完成したもの
デフォルトの挙動と違うところ
shadcn/ui の Combobox の Example Code では矢印と Enter で選択肢を選択できるようになっています。
しかし、<CommandInput>コンポーネントで変換のために Enter キーをクリックすると、「候補として表示されている一番上の選択肢を選択してしまう」ということが発生してしまいます。
ということで<CommandInput>のonKeyDownにこれを回避する処理を入れています。
また、それに伴い矢印キーではなく Tab キーで候補として表示されてある選択肢間を移動できるようにしています。
その他細かい点についてはStackBlitzのコード内にコメントで書いています。
Discussion