editor/src/components/InputAutocomplete.tsx

import React from "react";
import classnames from "classnames";
import {useCombobox} from "downshift";

const MAX_HEIGHT = 140;

export type InputAutocompleteProps = {
  value?: string
  options?: any[]
  onChange?(value: string | undefined): unknown
  "aria-label"?: string
};

export function InputAutocomplete({
  value,
  options = [],
  onChange = () => {},
  "aria-label": ariaLabel,
}: InputAutocompleteProps) {
  const [input, setInput] = React.useState(value || "");
  const menuRef = React.useRef<HTMLDivElement>(null);
  const [maxHeight, setMaxHeight] = React.useState(MAX_HEIGHT);

  const filteredItems = React.useMemo(() => {
    const lv = input.toLowerCase();
    return options.filter((item) => item[0].toLowerCase().includes(lv));
  }, [options, input]);

  const calcMaxHeight = React.useCallback(() => {
    if (menuRef.current) {
      const space = window.innerHeight - menuRef.current.getBoundingClientRect().top;
      setMaxHeight(Math.min(space, MAX_HEIGHT));
    }
  }, []);

  const {
    isOpen,
    getMenuProps,
    getInputProps,
    getItemProps,
    highlightedIndex,
    openMenu,
  } = useCombobox({
    items: filteredItems,
    inputValue: input,
    itemToString: (item) => (item ? item[0] : ""),
    stateReducer: (_state, action) => {
      if (action.type === useCombobox.stateChangeTypes.InputClick) {
        return {...action.changes, isOpen: true};
      }
      return action.changes;
    },
    onSelectedItemChange: ({selectedItem}) => {
      const v = selectedItem ? selectedItem[0] : "";
      setInput(v);
      onChange(selectedItem ? selectedItem[0] : undefined);
    },
    onInputValueChange: ({inputValue: v}) => {
      if (typeof v === "string") {
        setInput(v);
        onChange(v === "" ? undefined : v);
        openMenu();
      }
    },
  });

  React.useEffect(() => {
    if (isOpen) {
      calcMaxHeight();
    }
  }, [isOpen, calcMaxHeight]);

  React.useEffect(() => {
    window.addEventListener("resize", calcMaxHeight);
    return () => window.removeEventListener("resize", calcMaxHeight);
  }, [calcMaxHeight]);

  React.useEffect(() => {
    setInput(value || "");
  }, [value]);

  return (
    <div className="maputnik-autocomplete">
      <input
        {...getInputProps({
          "aria-label": ariaLabel,
          className: "maputnik-string",
          spellCheck: false,
          onFocus: () => openMenu(),
        })}
      />
      <div
        {...getMenuProps({}, {suppressRefError: true})}
        ref={menuRef}
        style={{position: "fixed", overflow: "auto", maxHeight, zIndex: 998}}
        className="maputnik-autocomplete-menu"
      >
        {isOpen &&
          filteredItems.map((item, index) => (
            <div
              key={item[0]}
              {...getItemProps({
                item,
                index,
                className: classnames("maputnik-autocomplete-menu-item", {
                  "maputnik-autocomplete-menu-item-selected": highlightedIndex === index,
                }),
              })}
            >
              {item[1]}
            </div>
          ))}
      </div>
    </div>
  );
}