IonSearchbar deleting the text when calling a search API onIonChange

Hey there,

I am facing an issue with the IonSearchbar React Component. I am trying to use it as a search bar that calls an API on onIonChange and displays the results of the search/API response below it.

The code below can be used to duplicate the issue (it’s using a stock market search API).

The issue is that if you are typing while the API promise is resolved it can lead to the typed text being deleted while you are typing, ruining the flow of typing. It is a huge issue as when users are typing out a company name, midway through the input the text can be backspaced away.

I have tried using the debounce property on IonSearchbar but it didn’t help.

If anyone has any insight on this it would be much appreciated.

Cheers

export default function App() {
  const [searchText, setSearchText] = useState("");
  const [suggestions, setSuggestions] = useState<any[]>([]);

  const getSuggestions = async (text: any) => {
    let data: any[] = [];
    await fetch(
      "https://api.allorigins.win/get?url=" +
        `${encodeURIComponent(
          "https://symbol-search.tradingview.com/symbol_search/?text=" +
            text +
            "&hl=1&exchange=&lang=en&type=&domain=production"
        )}`
    )
      .then((response) => {
        if (response.ok) return response.json();
        throw new Error("Network response was not ok.");
      })
      .then((d: any) => (data = JSON.parse(d.contents)));
    return data;
  };

  return (
    <IonApp>
      <div className="container">
        <IonSearchbar
          value={searchText}
          className="search-bar"
          onIonChange={async (e) => {
            setSearchText(e.detail.value!);
            const suggs = await getSuggestions(e.detail.value!);
            setSuggestions(suggs);
          }}
        />
        {suggestions.slice(0, 10).map((s, i) => {
          return <p key={i}>{s.symbol}</p>;
        })}
      </div>
    </IonApp>
  );
}

1 post - 1 participant

Read full topic