From 6e5f593c980d4967ff5726a3defe1a22e30b5c3c Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Wed, 13 Nov 2024 16:59:28 +0530
Subject: [PATCH] Fix EmojiPicker.tsx

---
 .../views/emojipicker/EmojiPicker.tsx         | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/components/views/emojipicker/EmojiPicker.tsx b/src/components/views/emojipicker/EmojiPicker.tsx
index de109440d7..e2470d188d 100644
--- a/src/components/views/emojipicker/EmojiPicker.tsx
+++ b/src/components/views/emojipicker/EmojiPicker.tsx
@@ -28,7 +28,6 @@ import {
 import { Key } from "../../../Keyboard";
 import { clamp } from "../../../utils/numbers";
 import { ButtonEvent } from "../elements/AccessibleButton";
-import { Ref } from "../../../accessibility/roving/types";
 
 export const CATEGORY_HEADER_HEIGHT = 20;
 export const EMOJI_HEIGHT = 35;
@@ -154,47 +153,47 @@ class EmojiPicker extends React.Component<IProps, IState> {
     };
 
     private keyboardNavigation(ev: React.KeyboardEvent, state: RovingState, dispatch: Dispatch<RovingAction>): void {
-        const node = state.activeNode?.current;
+        const node = state.activeNode;
         const parent = node?.parentElement;
         if (!parent || !state.activeNode) return;
         const rowIndex = Array.from(parent.children).indexOf(node);
         const refIndex = state.nodes.indexOf(state.activeNode);
 
-        let focusRef: Ref | undefined;
+        let focusNode: HTMLElement | undefined;
         let newParent: HTMLElement | undefined;
         switch (ev.key) {
             case Key.ARROW_LEFT:
-                focusRef = state.nodes[refIndex - 1];
-                newParent = focusRef?.current?.parentElement ?? undefined;
+                focusNode = state.nodes[refIndex - 1];
+                newParent = focusNode?.parentElement ?? undefined;
                 break;
 
             case Key.ARROW_RIGHT:
-                focusRef = state.nodes[refIndex + 1];
-                newParent = focusRef?.current?.parentElement ?? undefined;
+                focusNode = state.nodes[refIndex + 1];
+                newParent = focusNode?.parentElement ?? undefined;
                 break;
 
             case Key.ARROW_UP:
             case Key.ARROW_DOWN: {
                 // For up/down we find the prev/next parent by inspecting the refs either side of our row
-                const ref =
+                const node =
                     ev.key === Key.ARROW_UP
                         ? state.nodes[refIndex - rowIndex - 1]
                         : state.nodes[refIndex - rowIndex + EMOJIS_PER_ROW];
-                newParent = ref?.current?.parentElement ?? undefined;
+                newParent = node?.parentElement ?? undefined;
                 const newTarget = newParent?.children[clamp(rowIndex, 0, newParent.children.length - 1)];
-                focusRef = state.nodes.find((r) => r.current === newTarget);
+                focusNode = state.nodes.find((r) => r === newTarget);
                 break;
             }
         }
 
-        if (focusRef) {
+        if (focusNode) {
             dispatch({
                 type: Type.SetFocus,
-                payload: { ref: focusRef },
+                payload: { node: focusNode },
             });
 
             if (parent !== newParent) {
-                focusRef.current?.scrollIntoView({
+                focusNode?.scrollIntoView({
                     behavior: "auto",
                     block: "center",
                     inline: "center",
@@ -207,10 +206,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
     }
 
     private onKeyDown = (ev: React.KeyboardEvent, state: RovingState, dispatch: Dispatch<RovingAction>): void => {
-        if (
-            state.activeNode?.current &&
-            [Key.ARROW_DOWN, Key.ARROW_RIGHT, Key.ARROW_LEFT, Key.ARROW_UP].includes(ev.key)
-        ) {
+        if (state.activeNode && [Key.ARROW_DOWN, Key.ARROW_RIGHT, Key.ARROW_LEFT, Key.ARROW_UP].includes(ev.key)) {
             this.keyboardNavigation(ev, state, dispatch);
         }
     };