Как мне заставить NextUI ListBox прокручиваться до последнего ListItem? ⇐ Html

[Anonymous]

Некоторые предыстории: я пытаюсь создать канал чата сообщений.
У меня есть компонент NextUI ListBox, который имеет свойство isVirtualized и соответствующий параметры. Он создается с использованием следующего:

Код: Выделить всё

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


{(item) => (

{item.text}

)}

И ListboxWrapper:

Код: Выделить всё

const ListboxWrapper = ({children}) => (

{children}

);

Элементы списка загружаются динамически. Я бы хотел, чтобы последний элемент в списке всегда находился внизу содержащего его элемента div.
Сейчас у меня есть:

Код: Выделить всё

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

При этом происходит прокрутка вверх. Кажется, не имеет значения, какой блок я установил (

Код: Выделить всё

end

или start), поведение такое же. Я делаю что-то неправильно или есть более простой способ сделать это?
У меня были те же результаты с document.getElementById(..).scrollIntoView(..). Я также переместил ссылку на последний элемент списка, но когда я это сделаю, последний элемент списка появится в верхней части контейнера, а другие элементы не будут видны и их нельзя будет прокручивать.
Заранее спасибо!
РЕДАКТИРОВАТЬ:
Я попробовал решение, предложенное ниже, но поведение такое же.
Похоже, что всякий раз, когда я печатаю текст в поле ввода, ListBox прокручивается до вершина. Я обновил приведенный выше код, включив в него полный возврат компонента.
Функции onKeyPressHandler и onChangeHandler с их перехватчиками:

Код: Выделить всё

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);
};

И, наконец, функция getChats, которая получает чаты из серверной части и вызывает ScrollToBottom после завершения:

Код: Выделить всё

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

UPDATE2:
Я добавил console.log в функцию ScrollToBottom, и она вызывается только тогда, когда чаты обновляются. Однако он не прокручивается. Каждый раз, когда я что-то вводю в поле ввода, список прокручивается вверх, как будто его перерисовывают?

Подробнее здесь: https://stackoverflow.com/questions/793 ... t-listitem