From 68fa3fe33990c1c88c1c9154f0edef6af21a0336 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 27 May 2022 16:29:54 +0200
Subject: [PATCH] Fix hotkey navigation in threads
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/status/index.tsx | 36 +++++++++++++--------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index ed762b7b55..3f762c31bd 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -496,15 +496,15 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     const { status, ancestorsIds, descendantsIds } = this.props;
 
     if (id === status.id) {
-      this._selectChild(ancestorsIds.size - 1, true);
+      this._selectChild(ancestorsIds.size - 1);
     } else {
       let index = ImmutableList(ancestorsIds).indexOf(id);
 
       if (index === -1) {
         index = ImmutableList(descendantsIds).indexOf(id);
-        this._selectChild(ancestorsIds.size + index, true);
+        this._selectChild(ancestorsIds.size + index);
       } else {
-        this._selectChild(index - 1, true);
+        this._selectChild(index - 1);
       }
     }
   }
@@ -513,15 +513,15 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     const { status, ancestorsIds, descendantsIds } = this.props;
 
     if (id === status.id) {
-      this._selectChild(ancestorsIds.size + 1, false);
+      this._selectChild(ancestorsIds.size + 1);
     } else {
       let index = ImmutableList(ancestorsIds).indexOf(id);
 
       if (index === -1) {
         index = ImmutableList(descendantsIds).indexOf(id);
-        this._selectChild(ancestorsIds.size + index + 2, false);
+        this._selectChild(ancestorsIds.size + index + 2);
       } else {
-        this._selectChild(index + 1, false);
+        this._selectChild(index + 1);
       }
     }
   }
@@ -544,19 +544,18 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     firstEmoji?.focus();
   };
 
-  _selectChild(index: number, align_top: boolean) {
-    const container = this.node;
-    if (!container) return;
-    const element = container.querySelectorAll('.focusable')[index] as HTMLButtonElement;
+  _selectChild(index: number) {
+    this.scroller?.scrollIntoView({
+      index,
+      behavior: 'smooth',
+      done: () => {
+        const element = document.querySelector<HTMLDivElement>(`#thread [data-index="${index}"] .focusable`);
 
-    if (element) {
-      if (align_top && container.scrollTop > element.offsetTop) {
-        element.scrollIntoView(true);
-      } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
-        element.scrollIntoView(false);
-      }
-      element.focus();
-    }
+        if (element) {
+          element.focus();
+        }
+      },
+    });
   }
 
   renderTombstone(id: string) {
@@ -791,6 +790,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
         <Stack space={2}>
           <div ref={this.setRef} className='thread'>
             <ScrollableList
+              id='thread'
               ref={this.setScrollerRef}
               onRefresh={this.handleRefresh}
               hasMore={!!this.state.next}