Wie bekomme ich eine NextUI ListBox, um zum letzten ListItem zu scrollen? ⇐ HTML

[Guest]

Einige Hintergrundinformationen: Ich versuche, einen Nachrichten-Chat-Feed zu erstellen.
Ich habe eine NextUI ListBox-Komponente mit der Eigenschaft isVirtualized und den entsprechenden Parameter. Es wird wie folgt erstellt:

Code: Select all

    
{selectedServer ? selectedServer.serverAlias : "Chat Title"}


{(item) => (

{item.text}

)}

Und der ListboxWrapper:

Code: Select all

const ListboxWrapper = ({children}) => (

{children}

);

Die Elemente der Liste werden dynamisch geladen. Ich möchte, dass das letzte Element in der Liste immer am Ende des enthaltenden Div steht.
Ich habe derzeit:

Code: Select all

const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({behavior: 'smooth' , block: 'end'})
}

Was nach oben scrollt. Es scheint egal zu sein, welchen Block ich setze (

Code: Select all

end

oder start), das Verhalten ist das gleiche. Mache ich etwas falsch oder gibt es einen einfacheren Weg, dies zu tun?
Ich hatte die gleichen Ergebnisse mit document.getElementById(..).scrollIntoView(..). Ich habe auch den Verweis auf das letzte Listenelement verschoben, aber wenn ich das mache, erscheint das letzte Listenelement oben im Container und die anderen Elemente sind nicht sichtbar und können nicht gescrollt werden.
Vielen Dank im Voraus!
BEARBEITEN:
Ich habe die unten vorgeschlagene Lösung ausprobiert, aber das gleiche Verhalten.
Es scheint, dass jedes Mal, wenn ich Text in das Eingabefeld eingebe, die ListBox zu scrollt die Spitze. Ich habe den obigen Code aktualisiert, um die vollständige Rückgabe der Komponente einzuschließen.
Die Funktionen onKeyPressHandler und onChangeHandler mit ihren Hooks:

Code: Select all

const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
const selectedValue = React.useMemo(() => Array.from(selectedKeys).join(", "), [selectedKeys]);

const onKeyPressHandler = e => {
if (e.key === "Enter") {
const message = new ApiCall()
const chatRequest = new ChatRequest()
chatRequest.setChattext(textValue)
chatRequest.setServerid(selectedServer.serverID)
message.setChatrequest(chatRequest)
const apiCall = message.serializeBinary()

const requestOptions = {
method: 'POST',
headers: {'Content-Type': 'application/x-protobuf'},
body: apiCall
};

console.log("fetching chats")
fetch('http://localhost:8080/api/chats', requestOptions)
.then(response => {
if (response.ok) {
getChats()
}

changeTextValue("");
})
}
};

const onChangeHandler = e => {
changeTextValue(e.target.value);
};

Und schließlich die getChats-Funktion, die die Chats vom Backend abruft und scrollToBottom aufruft, wenn sie fertig ist:

Code: Select all

const getChats = () => {
fetch("http://localhost:8080/api/chats?serverID=" + selectedServer.serverID)
.then(res => res.json())
.then(data => {
setChats(data);
scrollToBottom()
})
}

UPDATE2:
Ich habe eine console.log zur scrollToBottom-Funktion hinzugefügt und sie wird nur aufgerufen, wenn die Chats werden aktualisiert. Es wird jedoch nicht gescrollt. Jedes Mal, wenn ich etwas in das Eingabefeld eingebe, scrollt die Liste nach oben, fast so, als würde sie neu gezeichnet?