enter key not working

[OmniscienceAcademy]

``Describe the bug When suggestions appear, and clicking away, to make the suggestion disappears, if I click in the search bar and press enter nothing happens

To Reproduce Steps to reproduce the behaviour:

1. Go to this site
2. Click on the search bar and type Hello World.
3. Click away from to make the suggestions disappear
4. Click in the search bar and press enter → nothing happens

Additional context Here is the code. I think my error come from the fact that I've put an onSearch in the handleOnSelect but not in the handleOnSearch. I do not want to put an onSeach in the handleOnsearch because otherwise, every time the user types something, he is interrupted by the research.

I'm pretty sure I've misunderstood something basic, but I can't see it. Can you help me? Thanks.

import { useState } from "react";
import Style from "@styles/components/Home/SearchBar.module.scss";
import { ReactSearchAutocomplete } from "react-search-autocomplete";
import { IYearRange } from "../../common/types";
import { autocompletion } from "../../common/api";

interface SearchBarProps {
  onSearch: (str: string, yearRange: IYearRange) => void;
  className?: string;
  initialInput?: string;
  yearRange: IYearRange;
  autofocus: boolean;
}

type Item = {
  key: number;
  type: string;
  name: string;
};

export default function SearchBar({
  onSearch,
  className,
  initialInput,
  yearRange,
  autofocus,
}: SearchBarProps) {
  const items0 = [
    {
      key: 0,
      type: "",
      name: initialInput || "",
    },
  ];

  const [items, setItems] = useState(items0);

  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
  const handleOnSearch = (string: string, results: any) => {
    // Function called a each new caracter entered in the search bar
    // onSearch will have as the first callback parameter
    // the string searched and for the second the results.
    if (string.length > 0) {
      autocompletion(string).then((res) => {
        setItems(res.autocompletion);
      });
    }
  };

  const handleOnSelect = (item: Item) => {
    // the item selected when clicking on a recommandation
    const input = item.name;
    const yearRangeNewQuery =
      input === initialInput ? yearRange : { startYear: 0, endYear: 2022 };
    onSearch(input, yearRangeNewQuery);
  };

  const handleOnFocus = () => {
    setItems(items);
  };

  const formatResult = (item: Item) => (
    <>
      <span style={{ display: "block", textAlign: "left" }}>
        {item.type} {item.name}
      </span>
    </>
  );
  return (
    <div className={`${Style.wrapper} ${className}`}>
      <ReactSearchAutocomplete<Item>
        items={items}
        onSearch={handleOnSearch}
        onSelect={handleOnSelect}
        autoFocus={autofocus}
        formatResult={formatResult}
        onFocus={handleOnFocus}
        inputSearchString={initialInput}
        fuseOptions={{ threshold: 1, shouldSort: false }}
        placeholder={"Search any topic. Ex: 'What is Reinforcement learning'"}
        inputDebounce={500}
      />
    </div>
  );
}

[sickdyd]

@OmniscienceAcademy Hello! This is how it's supposed to work. The search happens when you are typing and return is used to select one of the results. If you hide the results and hit return nothing will happen.

[OmniscienceAcademy]

Ah, this is annoying. Because the true search takes a lot of time, even if I can generate suggestions pretty quickly.

I want to do the true search if and only if the user press enter or click on the icon. But If I understand correctly, this is not possible right now?

[sickdyd]

@OmniscienceAcademy Yes, you are correct, it's not possible at the moment.

[sickdyd]

@OmniscienceAcademy I could add a flag like alwaysDisplayResults that will prevent the list of results from disappearing. How does that sound?

[sickdyd]

Closed because the request had no reply and it seems like only one user has the issue. In case more people need this I can add the feature.

[parmarravi]

alwaysDisplayResults please add this it make sense in the case from api hit @sickdyd