pl-fe: improve keyboard navigation

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/package.json

@@ -160,7 +160,7 @@
     "react-sparklines": "^1.7.0",
     "react-sticky-box": "^2.0.0",
     "react-swipeable-views": "^0.14.0",
-    "react-virtuoso": "^4.10.2",
+    "react-virtuoso": "^4.10.4",
     "redux": "^5.0.0",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^3.1.0",

packages/pl-fe/src/components/status-list.tsx

@@ -92,12 +92,16 @@ const StatusList: React.FC<IStatusList> = ({
   }, 300, { leading: true }), [onLoadMore, lastStatusId, statusIds.last()]);
 
   const selectChild = (index: number) => {
+    const selector = `#status-list [data-index="${index}"] .focusable`;
+    const element = document.querySelector<HTMLDivElement>(selector);
+
+    if (element) element.focus();
+
     node.current?.scrollIntoView({
       index,
       behavior: 'smooth',
       done: () => {
-        const element = document.querySelector<HTMLDivElement>(`#status-list [data-index="${index}"] .focusable`);
-        element?.focus();
+        if (!element) document.querySelector<HTMLDivElement>(selector)?.focus();
       },
     });
   };

packages/pl-fe/src/features/conversations/components/conversations-list.tsx

@@ -31,15 +31,16 @@ const ConversationsList: React.FC = () => {
   };
 
   const selectChild = (index: number) => {
+    const selector = `#direct-list [data-index="${index}"] .focusable`;
+    const element = document.querySelector<HTMLDivElement>(selector);
+
+    if (element) element.focus();
+
     ref.current?.scrollIntoView({
       index,
       behavior: 'smooth',
       done: () => {
-        const element = document.querySelector<HTMLDivElement>(`#direct-list [data-index="${index}"] .focusable`);
-
-        if (element) {
-          element.focus();
-        }
+        if (!element) document.querySelector<HTMLDivElement>(selector)?.focus();
       },
     });
   };

packages/pl-fe/src/features/event/event-discussion.tsx

@@ -83,15 +83,16 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
   };
 
   const _selectChild = (index: number) => {
+    const selector = `#thread [data-index="${index}"] .focusable`;
+    const element = document.querySelector<HTMLDivElement>(selector);
+
+    if (element) element.focus();
+
     scroller.current?.scrollIntoView({
       index,
       behavior: 'smooth',
       done: () => {
-        const element = document.querySelector<HTMLDivElement>(`#thread [data-index="${index}"] .focusable`);
-
-        if (element) {
-          element.focus();
-        }
+        if (!element) document.querySelector<HTMLDivElement>(selector)?.focus();
       },
     });
   };

packages/pl-fe/src/features/notifications/index.tsx

@@ -77,16 +77,16 @@ const Notifications = () => {
   };
 
   const _selectChild = (index: number) => {
+    const selector = `[data-index="${index}"] .focusable`;
+    const element = document.querySelector<HTMLDivElement>(selector);
+
+    if (element) element.focus();
+
     node.current?.scrollIntoView({
       index,
       behavior: 'smooth',
       done: () => {
-        const container = column.current;
-        const element = container?.querySelector(`[data-index="${index}"] .focusable`);
-
-        if (element) {
-          (element as HTMLDivElement).focus();
-        }
+        if (!element) document.querySelector<HTMLDivElement>(selector)?.focus();
       },
     });
   };

packages/pl-fe/src/features/search/components/search-results.tsx

@@ -100,12 +100,16 @@ const SearchResults = () => {
   };
 
   const selectChild = (index: number) => {
+    const selector = `#search-results [data-index="${index}"] .focusable`;
+    const element = document.querySelector<HTMLDivElement>(selector);
+
+    if (element) element.focus();
+
     node.current?.scrollIntoView({
       index,
       behavior: 'smooth',
       done: () => {
-        const element = document.querySelector<HTMLDivElement>(`#search-results [data-index="${index}"] .focusable`);
-        element?.focus();
+        if (!element) document.querySelector<HTMLDivElement>(selector)?.focus();
       },
     });
   };

packages/pl-fe/src/features/status/components/thread.tsx

@@ -233,11 +233,17 @@ const Thread: React.FC<IThread> = ({
 
   const _selectChild = (index: number) => {
     if (!useWindowScroll) index = index + 1;
+
+    const selector = `[data-index="${index}"] .focusable`;
+    const element = node.current?.querySelector<HTMLDivElement>(selector);
+
+    if (element) element.focus();
+
     scroller.current?.scrollIntoView({
       index,
       behavior: 'smooth',
       done: () => {
-        node.current?.querySelector<HTMLDivElement>(`[data-index="${index}"] .focusable`)?.focus();
+        if (!element) node.current?.querySelector<HTMLDivElement>(selector)?.focus();
       },
     });
   };

packages/pl-fe/yarn.lock

@@ -9054,10 +9054,10 @@ react-transition-group@^2.2.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react-virtuoso@^4.10.2:
-  version "4.10.2"
-  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.10.2.tgz#a27308a3c4cfeb24722032acc0b6a46055c26967"
-  integrity sha512-os6n9QKeKRF+8mnQR/vGy/xrFf6vXIzuaAVL54q5k2st2d5QIEwI+KDKaflMUmMvnDbPxf68bs+CF5bY3YI7qA==
+react-virtuoso@^4.10.4:
+  version "4.10.4"
+  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.10.4.tgz#856ed415d7071db0c666ce84809bab8bb834f45c"
+  integrity sha512-G/gprhTbK+lzMxoo/iStcZxVEGph/cIhc3WANEpt92RuMw+LiCZOmBfKoeoZOHlm/iyftTrDJhGaTCpxyucnkQ==
 
 react@^18.0.0:
   version "18.2.0"