# All files / src/components autocomplete-item.tsx

71.42% Statements 5/7
50% Branches 4/8
66.66% Functions 2/3
71.42% Lines 5/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57

    10x

    1x

    1x
    1x

    1x

     import { useEffect, useRef } from 'react';

    import SubstringHighlight from './substring-highlight';

    export type AutocompleteItemType = {
      id: string;
      pathLabel: string;
      itemLabel: string;
      items?: AutocompleteItemType[];
      tags?: string[];
    };

    type AutocompleteItemProps = {
      item: AutocompleteItemType;
      active: boolean;
      substringToHighlight: string;
      handleOnClick: (
        item: AutocompleteItemType | string,
        e: React.MouseEvent<HTMLButtonElement, MouseEvent>
      ) => void;
    };

    const AutocompleteItem = ({
      item,
      active,
      substringToHighlight,
      handleOnClick,
    }: AutocompleteItemProps) => {
      const node = useRef<HTMLLIElement>(null);

      useEffect(() => {
        Iif (active && node.current) {
          node.current.scrollIntoView({ block: 'nearest', inline: 'nearest' });
        }
      });

      return (
        <li ref={node} data-testid="autocomplete-item">
          <button
            type="button"
            onClick={(e) => handleOnClick(item, e)}
            className={active ? 'hover' : ''}
          >
            {substringToHighlight ? (
              <SubstringHighlight substring={substringToHighlight}>
                {item.pathLabel}
              </SubstringHighlight>
            ) : (
              item.itemLabel
            )}
          </button>
        </li>
      );
    };

    export default AutocompleteItem;