PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix EmojiPicker.tsx

Browse source
This commit is contained in:
R Midhun Suresh 2024-11-13 16:59:28 +05:30
parent e5c0cdc402
commit 6e5f593c98
No known key found for this signature in database
1 changed files with 13 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/views/emojipicker/EmojiPicker.tsx
View file

@ -28,7 +28,6 @@ import {
import { Key } from "../../../Keyboard"; import { Key } from "../../../Keyboard";
import { clamp } from "../../../utils/numbers"; import { clamp } from "../../../utils/numbers";
import { ButtonEvent } from "../elements/AccessibleButton"; import { ButtonEvent } from "../elements/AccessibleButton";
import { Ref } from "../../../accessibility/roving/types";
export const CATEGORY_HEADER_HEIGHT = 20; export const CATEGORY_HEADER_HEIGHT = 20;
export const EMOJI_HEIGHT = 35; 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 { private keyboardNavigation(ev: React.KeyboardEvent, state: RovingState, dispatch: Dispatch<RovingAction>): void {
const node = state.activeNode?.current; const node = state.activeNode;
const parent = node?.parentElement; const parent = node?.parentElement;
if (!parent || !state.activeNode) return; if (!parent || !state.activeNode) return;
const rowIndex = Array.from(parent.children).indexOf(node); const rowIndex = Array.from(parent.children).indexOf(node);
const refIndex = state.nodes.indexOf(state.activeNode); const refIndex = state.nodes.indexOf(state.activeNode);
let focusRef: Ref | undefined; let focusNode: HTMLElement | undefined;
let newParent: HTMLElement | undefined; let newParent: HTMLElement | undefined;
switch (ev.key) { switch (ev.key) {
case Key.ARROW_LEFT: case Key.ARROW_LEFT:
focusRef = state.nodes[refIndex - 1]; focusNode = state.nodes[refIndex - 1];
newParent = focusRef?.current?.parentElement ?? undefined; newParent = focusNode?.parentElement ?? undefined;
break; break;
case Key.ARROW_RIGHT: case Key.ARROW_RIGHT:
focusRef = state.nodes[refIndex + 1]; focusNode = state.nodes[refIndex + 1];
newParent = focusRef?.current?.parentElement ?? undefined; newParent = focusNode?.parentElement ?? undefined;
break; break;
case Key.ARROW_UP: case Key.ARROW_UP:
case Key.ARROW_DOWN: { case Key.ARROW_DOWN: {
// For up/down we find the prev/next parent by inspecting the refs either side of our row // 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 ev.key === Key.ARROW_UP
? state.nodes[refIndex - rowIndex - 1] ? state.nodes[refIndex - rowIndex - 1]
: state.nodes[refIndex - rowIndex + EMOJIS_PER_ROW]; : 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)]; 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; break;
} }
} }
if (focusRef) { if (focusNode) {
dispatch({ dispatch({
type: Type.SetFocus, type: Type.SetFocus,
payload: { ref: focusRef }, payload: { node: focusNode },
}); });
if (parent !== newParent) { if (parent !== newParent) {
focusRef.current?.scrollIntoView({ focusNode?.scrollIntoView({
behavior: "auto", behavior: "auto",
block: "center", block: "center",
inline: "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 => { private onKeyDown = (ev: React.KeyboardEvent, state: RovingState, dispatch: Dispatch<RovingAction>): void => {
if ( if (state.activeNode && [Key.ARROW_DOWN, Key.ARROW_RIGHT, Key.ARROW_LEFT, Key.ARROW_UP].includes(ev.key)) {
state.activeNode?.current &&
[Key.ARROW_DOWN, Key.ARROW_RIGHT, Key.ARROW_LEFT, Key.ARROW_UP].includes(ev.key)
) {
this.keyboardNavigation(ev, state, dispatch); this.keyboardNavigation(ev, state, dispatch);
} }
}; };