From a0e3f66dc163638b15c7d81a04e9b1390d68b1d3 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Fri, 15 Sep 2023 05:25:21 +0000
Subject: [PATCH] inbox: Center focused element if off screen when using
 keyboard.

---
 web/src/inbox_ui.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/web/src/inbox_ui.js b/web/src/inbox_ui.js
index 8e2f22af6b..2e2a52530f 100644
--- a/web/src/inbox_ui.js
+++ b/web/src/inbox_ui.js
@@ -819,6 +819,26 @@ function get_focus_class_for_row() {
     return focus_class;
 }
 
+function center_focus_if_offscreen($elt) {
+    if ($elt.length === 0) {
+        return;
+    }
+
+    const element_above = document.querySelector("#inbox-filters");
+    const element_down = document.querySelector("#compose");
+    const visible_top = element_above.getBoundingClientRect().bottom;
+    const visible_bottom = element_down.getBoundingClientRect().top;
+
+    const elt_pos = $elt[0].getBoundingClientRect();
+    if (elt_pos.top >= visible_top && elt_pos.bottom <= visible_bottom) {
+        // Element is visible.
+        return;
+    }
+
+    // Scroll element into center if offscreen.
+    $elt[0].scrollIntoView({block: "center"});
+}
+
 export function initialize() {
     $("body").on(
         "keyup",
@@ -913,4 +933,9 @@ export function initialize() {
             unread_ops.mark_stream_as_read(stream_id);
         }
     });
+
+    $("body").on("focus", ".inbox-row, .inbox-header", (e) => {
+        const $elt = $(e.currentTarget);
+        center_focus_if_offscreen($elt);
+    });
 }