AutoComplete.tsx

gistfile1.txt

import React, { ChangeEvent, useRef, useState } from 'react';

type AutoCompleteProps = {
  possibleValues: string[];
  handleKeydown: () => void;
  setTags: (values: string[]) => void;
};

function Autocomplete({ possibleValues, handleKeydown, setTags }: AutoCompleteProps) {
  const inputRef = useRef(null);
  const [inputValue, setInputValue] = useState('');
  const [suggestions, setSuggestions] = useState<string[]>([]);

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;

    setInputValue(value);

    if (value.length > 0) {
      const filteredSuggestions = possibleValues.filter((suggestion) =>
        suggestion.toLowerCase().includes(value.toLowerCase()),
      );
      setSuggestions(filteredSuggestions);
    } else {
      setSuggestions([]);
    }
  };

  const handleSuggestionClick = (value: string) => {
    setTags((tags: string[]) => {
      if (tags.some((tag) => tag.toLowerCase() === value.toLowerCase())) {
        return [...tags];
      } else {
        return [...tags, value];
      }
    });

    setSuggestions([]);
    setInputValue('');
    inputRef.current.focus();
  };

  const onKeyDown = (e: ChangeEvent<HTMLInputElement> & KeyboardEvent) => {
    handleKeydown(e);
    if (e.key === 'Enter') {
      setInputValue('');
      setSuggestions([]);
      inputRef.current.focus();
    }
  };

  return (
    <>
      <input
        type='text'
        value={inputValue}
        onChange={handleInputChange}
        aria-autocomplete='list'
        aria-controls='autocomplete-list'
        onKeyDown={onKeyDown}
        className='text-input'
        autoFocus
        ref={inputRef}
      />
      <div className='autocomplete-wrapper'>
        {suggestions.length > 0 && (
          <ul id='autocomplete-list' className='suggestions-list' role='listbox'>
            {suggestions.map((suggestion, index) => (
              <li key={index} onClick={() => handleSuggestionClick(suggestion)} role='option'>
                {suggestion}
              </li>
            ))}
          </ul>
        )}
      </div>
    </>
  );
}

export default Autocomplete;

AutoComplete component from the article:
Create a Tags Input Field With Autocomplete in React Without Using Any External Packages