Advent Calendar 2020 example4

Advent Calendar 2020 example4.ts

export const SearchHeaderSuggest = forwardRef<HTMLDivElement, Props>(
  ({ items, onSelect, onBlurSuggest, onClearAll }, ref) => {
    const onBlur = useCallback<FocusEventHandler<HTMLDivElement>>(
      (e) => {
        // サジェスト内の各項目はblurイベントを発生させず、全体を抜けた時に1回呼ぶ
        if (
          // ① ノード内でフォーカスが遷移したか判定
          (ref as MutableRefObject<HTMLDivElement>).current?.contains(
            e.relatedTarget as Node
          )
        ) {
          e.preventDefault();
          e.stopPropagation();
        } else {
          // ② 引数のbluｒ処理を実行
          onBlurSuggest(e);
        }
      },
      [ref, onBlurSuggest]
    );

    return (
      <div tabIndex={0} ref={ref} onBlur={onBlur}>
        <div>
          <ul>
            {items.map((item) => (
              <SuggestItem key={item.name} item={item} onSelect={onSelect} />
            ))}
          </ul>
          <button onClick={onClick}>全てクリア</button>
        </div>
      </div>
    );
  }
);