shadcn/uiでmulti selectなcomboboxが欲しい

hajimism

複数選択可
既存の選択肢を検索可
既存の選択肢に無かったらその場で作成可

なセレクトボックスがshadcn/uiで（というかRadix UIで）欲しい。
https://ui.shadcn.com/

hajimism

NotionのMulti Select的な

hajimism

どうせ世界中のみんなも同じ想いだろうと思ったらやっぱりそうだったし、なんならshadcnも同じ想いだった
https://github.com/shadcn/ui/issues/66

hajimism

Radix UIでもめっちゃ議論されてるけど中の人が全然顔だしてない

hajimism

Downshiftというライブラリを使えっていうアドバイスがある

The library offers a couple of solutions. The first solution, which is the one we recommend you to try first, is a set of React hooks. Each hook provides the stateful logic needed to make the corresponding component functional and accessible. Navigate to the documentation for each by using the links in the list below.

いい感じのhooksを提供してくれるみたい。shadcn/uiのComboboxはcmdkを使っていて、カニバリ具合がちょっと気になる

hajimism

そもそもshadcn/uiのComboboxも検索ができるだけで新規作成はできないからなー

hajimism

このFancy Multi Selectはかなりイメージに近くて、これに「新規追加」的なUIがあったら完璧

hajimism

実はComboboxに新規追加を加える実装は前に試したことがある、ちょいイマイチだけども。

hajimism

なので一旦はこの2つのフュージョンを目指すか

hajimism

Fancy Multi Selectを読む

hajimism

ロジックのところはざっくりこんな感じ

inputRefとinputValueってなんで別々に管理しているんやろ
openいつ使うんやろ
handleUnselectは明確に選択解除だろうし、selectableは選択肢だろうし、handleKeyDownには細かい操作が詰まってんだろうな

hajimism

Viewの部分は大きく

入力部と

選択肢部

に別れている。shadcn/uiのComboboxだと選択肢部の表示にPopoverを使っていたけれど、こっちは自前で管理している。

hajimism

ロジックの方から読むか。

ゆーても気になるところはhandleKeyDownしかなく

  const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
    const input = inputRef.current
    if (input) {
      if (e.key === "Delete" || e.key === "Backspace") {
        if (input.value === "") {
          setSelected(prev => {
            const newSelected = [...prev];
            newSelected.pop();
            return newSelected;
          })
        }
      }
      // This is not a default behaviour of the <input /> field
      if (e.key === "Escape") {
        input.blur();
      }
    }
  }, []);

keydownを観測するためにinputRefを使っている
delete keyで最新追加されたものを削除
escape keyでfocus out

hajimism

あとはcmdkの中に隠蔽されている

hajimism

View

入力部は、selectされたBadgeとInputが並んでいるだけ
選択肢部はCommandItemが並んでいるだけ

という感じ。シンプルだな。

hajimism

手を動かしていこう。

Fancyをほぼ丸パクリさせてもらって、多少の抽象化をほどこした。

/**
 * ref: https://craft.mxkaske.dev/post/fancy-multi-select
 */

"use client";

import { Command as CommandPrimitive } from "cmdk";
import { X } from "lucide-react";
import {
  useRef,
  useState,
  useCallback,
  KeyboardEvent,
  FC,
  MouseEventHandler,
} from "react";

import { Badge } from "@/components/ui/badge";
import { Command, CommandGroup, CommandItem } from "@/components/ui/command";

import { Item } from "./type";

type Props = {
  items: Item[];
  placeholder?: string;
};

export const MultiSelect: FC<Props> = ({
  items,
  placeholder = "Select items...",
}) => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState<typeof items>([]);
  const [inputValue, setInputValue] = useState("");

  const handleSelect = useCallback((item: Item) => {
    setInputValue("");
    setSelected((prev) => [...prev, item]);
  }, []);

  const handleUnselect = useCallback((item: Item) => {
    setSelected((prev) => prev.filter((s) => s.value !== item.value));
  }, []);

  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {
    const input = inputRef.current;
    if (input) {
      if (e.key === "Delete" || e.key === "Backspace") {
        if (input.value === "") {
          setSelected((prev) => {
            const newSelected = [...prev];
            newSelected.pop();
            return newSelected;
          });
        }
      }
      // This is not a default behaviour of the <input /> field
      if (e.key === "Escape") {
        input.blur();
      }
    }
  }, []);

  const haltEvent: MouseEventHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const selectables = items.filter((item) => !selected.includes(item));

  return (
    <Command
      onKeyDown={handleKeyDown}
      className="overflow-visible bg-transparent"
    >
      <div className="group rounded-md border border-input px-3 py-2 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
        <div className="flex flex-wrap gap-1">
          {selected.map((item) => {
            return (
              <Badge key={item.value} variant="secondary">
                {item.label}
                <button
                  className="ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      handleUnselect(item);
                    }
                  }}
                  onMouseDown={haltEvent}
                  onClick={() => handleUnselect(item)}
                >
                  <X className="h-3 w-3 text-secondary-foreground transition-colors hover:text-muted-foreground" />
                </button>
              </Badge>
            );
          })}
          {/* Avoid having the "Search" Icon */}
          <CommandPrimitive.Input
            ref={inputRef}
            value={inputValue}
            onValueChange={setInputValue}
            onBlur={() => setOpen(false)}
            onFocus={() => setOpen(true)}
            placeholder={placeholder}
            className="ml-2 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
          />
        </div>
      </div>
      <div className="relative mt-2">
        {open && selectables.length > 0 && (
          <div className="absolute top-0 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
            <CommandGroup className="h-full overflow-auto">
              {selectables.map((item) => {
                return (
                  <CommandItem
                    key={item.value}
                    onSelect={() => handleSelect(item)}
                    onMouseDown={haltEvent}
                  >
                    {item.label}
                  </CommandItem>
                );
              })}
            </CommandGroup>
          </div>
        )}
      </div>
    </Command>
  );
};

hajimism

ここからやりたいこととしては「selectablesが無いときに、inputを新しく選択肢として加えるCommandを追加」くらいか？

hajimism

いろいろ試して、単純にこれを挿入しておくだけで「選択肢がないときにinputを新しく選択肢として加えるCommandを表示」ができるとわかった。たぶんCommandはItemのchildrenを見ているため、childrenにinputValueが入ってれば常に選択肢に出る。

              <CommandItem onMouseDown={haltEvent}>
                Create {inputValue}!
              </CommandItem>

hajimism

逆に空文字のときに出てこられても困るということで

              {inputValue && (
                <CommandItem onMouseDown={haltEvent}>
                  Create {inputValue}!
                </CommandItem>
              )}

hajimism

handleSelectで抽象化しているおかげで、これだけで良かったわ

  const createNew = () => {
    const newItem = { value: inputValue, label: inputValue };
    handleSelect(newItem);
  };

              {inputValue && (
                <CommandItem
                  key="new"
                  onSelect={createNew}
                  onMouseDown={haltEvent}
                >
                  Create {inputValue}!
                </CommandItem>
              )}

newItemのvalueについては諸説ありそう、単純な文字列として持てばよくね、みたいな

hajimism

あとはあれだな、親から渡しているitemsにnewItemsを加えたい

フロントだけで状態を管理する
いちいちサーバーを叩きに行って云々

みたいなことが考えられる。いずれにせよフロントで状態管理したい気がする。

hajimism

とりあえずJotaiで適当に管理してみる。一応期待通りに動く。

親

"use client";

import { useAtom } from "jotai";

import { flameworksAtom } from "./atom";
import { MultiSelect } from "./component";
import { Item } from "./type";

export default function Page() {
  const [flameworks, setFlameWorks] = useAtom(flameworksAtom);
  const onCreateNew = (newItem: Item) =>
    setFlameWorks((current) => [...current, newItem]);

  return (
    <div>
      <MultiSelect items={flameworks} onCreateNew={onCreateNew} />
    </div>
  );
}

MultiSelectのcreateNew

  const createNew = () => {
    const newItem = { value: inputValue, label: inputValue };
    onCreateNew?.(newItem);
    handleSelect(newItem);
  };

hajimism

いっそこういう抽象化もありかなと思う。利用者（開発者）の関心としてはこういうことだと思う。

"use client";

import { FRAMEWORKS } from "./data";
import { useMultiSelect } from "./hook";

export default function Page() {
  const MultiFlameworksSelect = useMultiSelect(FRAMEWORKS);

  return (
    <div>
      <MultiFlameworksSelect />
    </div>
  );
}

hajimism

だからまあ、全部のせでこんな感じよ。Jotaiへの依存はない。

"use client";

import { Command as CommandPrimitive } from "cmdk";
import { X } from "lucide-react";
import {
  useRef,
  useState,
  useCallback,
  KeyboardEvent,
  FC,
  MouseEventHandler,
} from "react";

import { Badge } from "@/components/ui/badge";
import { Command, CommandGroup, CommandItem } from "@/components/ui/command";

import { Item } from "./type";

export const useMultiSelect = (
  initialItems: Item[],
  placeholder = "Select items..."
) => {
  const [items, setItems] = useState(initialItems);
  const onCreateNew = (newItem: Item) =>
    setItems((current) => [...current, newItem]);

  const MultiSelect: FC = () => {
    const inputRef = useRef<HTMLInputElement>(null);
    const [open, setOpen] = useState(false);
    const [selected, setSelected] = useState<Item[]>([]);
    const [inputValue, setInputValue] = useState("");

    const createNew = () => {
      const newItem = { value: inputValue, label: inputValue };
      onCreateNew(newItem);
      handleSelect(newItem);
    };

    const handleSelect = useCallback((item: Item) => {
      setInputValue("");
      setSelected((prev) => [...prev, item]);
    }, []);

    const handleUnselect = useCallback((item: Item) => {
      setSelected((prev) => prev.filter((s) => s.value !== item.value));
    }, []);

    const handleKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {
      const input = inputRef.current;
      if (input) {
        if (e.key === "Delete" || e.key === "Backspace") {
          if (input.value === "") {
            setSelected((prev) => {
              const newSelected = [...prev];
              newSelected.pop();
              return newSelected;
            });
          }
        }
        // This is not a default behaviour of the <input /> field
        if (e.key === "Escape") {
          input.blur();
        }
      }
    }, []);

    const haltEvent: MouseEventHandler = (e) => {
      e.preventDefault();
      e.stopPropagation();
    };

    const selectables = items.filter((item) => !selected.includes(item));

    return (
      <Command
        onKeyDown={handleKeyDown}
        className="overflow-visible bg-transparent"
      >
        <div className="group rounded-md border border-input px-3 py-2 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
          <div className="flex flex-wrap gap-1">
            {selected.map((item) => {
              return (
                <Badge key={item.value} variant="secondary">
                  {item.label}
                  <button
                    className="ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        handleUnselect(item);
                      }
                    }}
                    onMouseDown={haltEvent}
                    onClick={() => handleUnselect(item)}
                  >
                    <X className="h-3 w-3 text-secondary-foreground transition-colors hover:text-muted-foreground" />
                  </button>
                </Badge>
              );
            })}
            {/* Avoid having the "Search" Icon */}
            <CommandPrimitive.Input
              ref={inputRef}
              value={inputValue}
              onValueChange={setInputValue}
              onBlur={() => setOpen(false)}
              onFocus={() => setOpen(true)}
              placeholder={placeholder}
              className="ml-2 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
            />
          </div>
        </div>
        <div className="relative mt-2">
          {open && selectables.length > 0 && (
            <div className="absolute top-0 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
              <CommandGroup className="h-full overflow-auto">
                {selectables.map((item) => {
                  return (
                    <CommandItem
                      key={item.value}
                      onSelect={() => handleSelect(item)}
                      onMouseDown={haltEvent}
                    >
                      {item.label}
                    </CommandItem>
                  );
                })}
                {inputValue && (
                  <CommandItem
                    key="new"
                    onSelect={createNew}
                    onMouseDown={haltEvent}
                  >
                    Create {inputValue}!
                  </CommandItem>
                )}
              </CommandGroup>
            </div>
          )}
        </div>
      </Command>
    );
  };

  return MultiSelect;
};

hajimism

あーでも↑じゃダメだな、setItemsが更新されるたびにMultiSelectの中のStateが初期化されてしまうので。

hajimism

Stateをリフトアップしたり、selectedが更新されるたびにfocusを当てなおしたりすると、多分期待通りに動いている。

"use client";

import { Command as CommandPrimitive } from "cmdk";
import { X } from "lucide-react";
import {
  useRef,
  useState,
  useCallback,
  KeyboardEvent,
  MouseEventHandler,
  memo,
  useEffect,
} from "react";

import { Badge } from "@/components/ui/badge";
import { Command, CommandGroup, CommandItem } from "@/components/ui/command";

import { Item } from "./type";

export const useMultiSelect = (
  initialItems: Item[],
  placeholder = "Select items..."
) => {
  const [items, setItems] = useState(initialItems);
  const [selected, setSelected] = useState<Item[]>([]);
  const onCreateNew = (newItem: Item) =>
    setItems((current) => [...current, newItem]);
  const [open, setOpen] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const MultiSelect = memo(() => {
    const [inputValue, setInputValue] = useState("");

    const createNew = () => {
      const newItem = { value: inputValue, label: inputValue };
      onCreateNew(newItem);
      handleSelect(newItem);
    };

    const handleSelect = useCallback((item: Item) => {
      setInputValue("");
      setSelected((prev) => [...prev, item]);
    }, []);

    const handleUnselect = useCallback((item: Item) => {
      setSelected((prev) => prev.filter((s) => s.value !== item.value));
    }, []);

    const handleKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {
      const input = inputRef.current;
      if (input) {
        if (e.key === "Delete" || e.key === "Backspace") {
          if (input.value === "") {
            setSelected((prev) => {
              const newSelected = [...prev];
              newSelected.pop();
              return newSelected;
            });
          }
        }
        // This is not a default behaviour of the <input /> field
        if (e.key === "Escape") {
          input.blur();
        }
      }
    }, []);

    useEffect(() => {
      const input = inputRef.current;
      input?.focus();
    }, [selected]);

    const haltEvent: MouseEventHandler = (e) => {
      e.preventDefault();
      e.stopPropagation();
    };

    const selectables = items.filter((item) => !selected.includes(item));

    return (
      <Command
        onKeyDown={handleKeyDown}
        className="overflow-visible bg-transparent"
      >
        <div className="group rounded-md border border-input px-3 py-2 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
          <div className="flex flex-wrap gap-1">
            {selected.map((item) => {
              return (
                <Badge key={item.value} variant="secondary">
                  {item.label}
                  <button
                    className="ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        handleUnselect(item);
                      }
                    }}
                    onMouseDown={haltEvent}
                    onClick={() => handleUnselect(item)}
                  >
                    <X className="h-3 w-3 text-secondary-foreground transition-colors hover:text-muted-foreground" />
                  </button>
                </Badge>
              );
            })}
            {/* Avoid having the "Search" Icon */}
            <CommandPrimitive.Input
              ref={inputRef}
              value={inputValue}
              onValueChange={setInputValue}
              onBlur={() => setOpen(false)}
              onFocus={() => setOpen(true)}
              placeholder={placeholder}
              className="ml-2 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
            />
          </div>
        </div>
        <div className="relative mt-2">
          {open && selectables.length > 0 && (
            <div className="absolute top-0 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
              <CommandGroup className="h-full overflow-auto">
                {selectables.map((item) => {
                  return (
                    <CommandItem
                      key={item.value}
                      onSelect={() => handleSelect(item)}
                      onMouseDown={haltEvent}
                    >
                      {item.label}
                    </CommandItem>
                  );
                })}
                {inputValue && (
                  <CommandItem
                    key="new"
                    onSelect={createNew}
                    onMouseDown={haltEvent}
                  >
                    Create {inputValue}!
                  </CommandItem>
                )}
              </CommandGroup>
            </div>
          )}
        </div>
      </Command>
    );
  });
  MultiSelect.displayName = "MultiSelect";

  return MultiSelect;
};

hajimism

そんなことなかった、Escapeできなくなってる

hajimism

あとinputをクリックしても一発でfocusが当たらない

hajimism

あ、inputにfocusが当たらないのにopenしているからescapeできないみたいに感じるんだ
inputにfocusが当たっているときはふつうにescapeできる

hajimism

ので

    useEffect(() => {
      if (open) {
        const input = inputRef.current;
        input?.focus();
      }
    }, []);

を追加したらたぶんいけた

hajimism

あー、openがfalseになったらinputが消えてしまう問題もある。めんどくせーーーー

hajimism

ここらへん全部Componentの外にもってってOKだった。↑も解決した

  const [items, setItems] = useState(initialItems);
  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState<Item[]>([]);
  const [inputValue, setInputValue] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

hajimism

Itemの重複を避けたかったので、

    const alreadyExist = items.map(({ label }) => lebel).includes(inputValue);

を作って!alreadyExistならCreateNewが表示されないようにした。

hajimism

ほんでこうした

                {alreadyExist && (
                  <CommandItem className="aria-selected:bg-background aria-selected:text-red-10">
                    {inputValue} is already selected!
                  </CommandItem>
                )}

hajimism

こいつも必要でした

  const alreadySelected = selected
    .map(({ label }) => label)
    .includes(inputValue);

                {alreadyExist && alreadySelected && (
                  <CommandItem className="aria-selected:bg-background aria-selected:text-red-10">
                    {inputValue} is already selected!
                  </CommandItem>
                )}

hajimism

選択肢が増えたときに選択肢を提示するところも無限に大きくなるので、max-hを与えて制御した
max-h-[310px] overflow-y-auto
310pxで9.5個見える

hajimism

どう考えても選択したItemを外でどうにかしたいと思うので、hookからitemも返すようにした

  return [MultiSelect, items];

hajimism

今気づいた、これ返すべきなのselectedやん

hajimism

create newを用意したら選択肢Viewの表示にselectables.length > 0 &&の制約は必要なくなったので消した。

hajimism

同じロジックを使っているはずなのにJotaiの方では{inputValue} is already selected!が表示されない

hajimism

どうやらここが期待通りではないらしい？ちょうどitemsにJotai使ってるしな

  const alreadyExist = items.map(({ label }) => label).includes(inputValue);

hajimism

いやー、よくわからん

                {alreadyExist && alreadySelected && (
                  <CommandItem className="aria-selected:bg-background aria-selected:text-red-10">
                    {inputValue} is already selected!
                  </CommandItem>
                )}

hajimism

openはしてる

hajimism

わからん、一旦Closeして離れよ

hajimism

このスクラップは2023/06/17にクローズされました