From 781db63fa639e286622542bc7cba4e29c3c17e5f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 16 Jan 2020 01:35:42 +0000
Subject: [PATCH] split out home/end handling into a helper as not all
 roving-tab-index widgets want it

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/RoomList.js |  6 ++++--
 src/contexts/RovingTabIndexContext.js  | 26 ++++++++++++++++----------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
index 4441b4d539..21cd1ed719 100644
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -39,7 +39,7 @@ import * as sdk from "../../../index";
 import * as Receipt from "../../../utils/Receipt";
 import {Resizer} from '../../../resizer';
 import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
-import {RovingTabIndexContextProvider} from "../../../contexts/RovingTabIndexContext";
+import {RovingTabIndexContextProvider, RovingTabIndexHomeEndHelper} from "../../../contexts/RovingTabIndexContext";
 
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
@@ -789,7 +789,9 @@ export default createReactClass({
                 onMouseLeave={this.onMouseLeave}
             >
                 <RovingTabIndexContextProvider>
-                    { subListComponents }
+                    <RovingTabIndexHomeEndHelper>
+                        { subListComponents }
+                    </RovingTabIndexHomeEndHelper>
                 </RovingTabIndexContextProvider>
             </div>
         );
diff --git a/src/contexts/RovingTabIndexContext.js b/src/contexts/RovingTabIndexContext.js
index 2e8439d2a4..55ac19e40f 100644
--- a/src/contexts/RovingTabIndexContext.js
+++ b/src/contexts/RovingTabIndexContext.js
@@ -134,19 +134,30 @@ export const RovingTabIndexContextProvider = ({children}) => {
         refs: [],
     });
 
+    const context = useMemo(() => ({state, dispatch}), [state]);
+
+    return <RovingTabIndexContext.Provider value={context}>
+        {children}
+    </RovingTabIndexContext.Provider>;
+};
+
+// Helper to handle Home/End to jump to first/last roving-tab-index for widgets such as treeview
+export const RovingTabIndexHomeEndHelper = ({children}) => {
+    const context = useContext(RovingTabIndexContext);
+
     const onKeyDown = useCallback((ev) => {
         // check if we actually have any items
-        if (state.refs.length <= 0) return;
+        if (context.state.refs.length <= 0) return;
 
         let handled = true;
         switch (ev.key) {
             case Key.HOME:
                 // move focus to first item
-                setImmediate(() => state.refs[0].current.focus());
+                setImmediate(() => context.state.refs[0].current.focus());
                 break;
             case Key.END:
                 // move focus to last item
-                state.refs[state.refs.length - 1].current.focus();
+                context.state.refs[context.state.refs.length - 1].current.focus();
                 break;
             default:
                 handled = false;
@@ -156,15 +167,10 @@ export const RovingTabIndexContextProvider = ({children}) => {
             ev.preventDefault();
             ev.stopPropagation();
         }
-    }, [state]);
+    }, [context.state]);
 
-    const context = useMemo(() => ({state, dispatch}), [state]);
-
-    // wrap in a div with key-down handling for HOME/END keys
     return <div onKeyDown={onKeyDown}>
-        <RovingTabIndexContext.Provider value={context}>
-            {children}
-        </RovingTabIndexContext.Provider>
+        { children }
     </div>;
 };