Emoji Picker: Focused emoji does not move with the arrow keys (#30893)

* We should focus the node in the DOM so that the browser focus(with outline) matches the our internal RovingIndex state

* Don't move focus from the input if we are in "virtual" focus(via active descendant)

src/components/views/emojipicker/EmojiPicker.tsx

@@ -187,6 +187,11 @@ class EmojiPicker extends React.Component<IProps, IState> {
         }
 
         if (focusNode) {
+            // Only move actual DOM focus if an emoji already has focus
+            // If the input has focus, keep using aria-activedescendant for virtual focus
+            if (document.activeElement !== document.querySelector(".mx_EmojiPicker_search input")) {
+                focusNode?.focus();
+            }
             dispatch({
                 type: Type.SetFocus,
                 payload: { node: focusNode },