From 027133a0f36d381fd354331ea37d0b86d6b98a19 Mon Sep 17 00:00:00 2001 From: thecodrr Date: Fri, 11 Feb 2022 23:42:59 +0500 Subject: [PATCH] feat: improve list keyboard navigation --- apps/web/package.json | 2 +- apps/web/src/components/list-container/index.js | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index 65ec445d7..6440e79a2 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -51,7 +51,7 @@ "react-scrollbars-custom": "^4.0.25", "react-toggle": "^4.1.2", "react-virtualized-auto-sizer": "^1.0.4", - "react-virtuoso": "^1.9.3", + "react-virtuoso": "^2.4.0", "rebass": "^4.0.7", "showdown": "github:thecodrr/showdown", "streamablefs": "file:packages/streamablefs", diff --git a/apps/web/src/components/list-container/index.js b/apps/web/src/components/list-container/index.js index 07bfb1117..cb540542b 100644 --- a/apps/web/src/components/list-container/index.js +++ b/apps/web/src/components/list-container/index.js @@ -78,7 +78,11 @@ function ListContainer(props) { } if (isUp || isDown) { - listRef.current.scrollToIndex(nextIndex); + listRef.current.scrollIntoView({ + index: nextIndex, + behavior: "auto", + }); + e.preventDefault(); const listItem = listContainerRef.current.querySelector( `[data-item-index="${nextIndex}"]` );