Ich versuche, ein Eingabefeld zu erstellen, in das der Benutzer etwas eingibt und basierend auf der Eingabe ein Vorschlags-Popup unter dem Eingabefeld mit dem vorgeschlagenen Inhalt angezeigt wird. In meinem Code werden die Vorschläge ganz gut angezeigt, aber wenn ich mehr eingebe, wird das vorherige Popup nicht geschlossen.

return 
  setValue(e.target.value)} className="w-full border-none absolute inset-0 z-10 outline-none px-2 text-sm bg-transparent" style={{ WebkitTextFillColor: "transparent" }} maxLength={maxLength} /> 
 {value.split(" ").map((word, i) => { const isHighlighted = word.toLowerCase().includes(suggestions[0]); return ( 
 {isHighlighted ? ( <>{getHighlightedSyntex(word, i)} ) : ( getSyntex(word, i) )} {getSuggestions(word)} 
 ); })} 
 

Hier zeige ich meine Renderings. Die getSuggestions-Funktion lautet wie folgt:

const getSuggestions = (word) => { const matchedPartialSuggestions = suggestions.filter( (item) => word !== "" && item.toLowerCase().startsWith(word.toLowerCase()) ); console.log('va', word, matchedPartialSuggestions) return ( <> {matchedPartialSuggestions.length > 0 && ( 
 {matchedPartialSuggestions?.map((item, i) => { return 
{highlightMatching(word, item)}
; })} 
 )}  ); };

In diesen Funktionen zeige ich ein Popup mit Suchvorschlägen an. Ich weiß, warum das Popup nicht geschlossen wird, denn wenn ich etwas eingebe, das mit den Vorschlagsdaten übereinstimmt, erhält die Variable der getSuggestions-Funktion den gefilterten Wert. Aus diesem Grund lässt sich das Popup nicht schließen. Ich möchte aber, dass die Suchvorschläge nur dann angezeigt werden, wenn der Eingabewert mit den Suchvorschlagsdaten übereinstimmt, andernfalls wird das Popup immer ausgeblendet.