エントリーの編集
                エントリーの編集は全ユーザーに共通の機能です。
                    必ずガイドラインを一読の上ご利用ください。
shadcn/uiのComboboxで検索だけではなく新規作成も行えるコンポーネントを作成する
記事へのコメント0件
- 注目コメント
 - 新着コメント
 
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
          - バナー広告なし
 - ミュート機能あり
 - ダークモード搭載
 
関連記事
shadcn/uiのComboboxで検索だけではなく新規作成も行えるコンポーネントを作成する
背景 shadcn/ui のデフォルトの Combobox では検索を行えますが新規作成はできません。 ということで作... 背景 shadcn/ui のデフォルトの Combobox では検索を行えますが新規作成はできません。 ということで作成してみます。 完成したもの デフォルトの挙動と違うところ shadcn/ui の Combobox の Example Code では矢印と Enter で選択肢を選択できるようになっています。 しかし、<CommandInput>コンポーネントで変換のために Enter キーをクリックすると、「候補として表示されている一番上の選択肢を選択してしまう」ということが発生してしまいます。 ということで<CommandInput>のonKeyDownにこれを回避する処理を入れています。 また、それに伴い矢印キーではなく Tab キーで候補として表示されてある選択肢間を移動できるようにしています。 その他細かい点についてはStackBlitzのコード内にコメントで書いています。
              
            

