add arrow key iteration feature to command menulist

RocketChat · Mar 12, 2024 · 5b81be2 · 5b81be2
1 parent 28cd261
commit 5b81be2
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 7 deletions.
diff --git a/packages/react/src/components/ChatInput/ChatInput.js b/packages/react/src/components/ChatInput/ChatInput.js
@@ -87,6 +87,7 @@ const ChatInput = ({ scrollToBottom }) => {
 
   const [filteredMembers, setFilteredMembers] = useState([]);
 
+  const [commandIndex, setCommandIndex] = useState(0);
   const [mentionIndex, setmentionIndex] = useState(-1);
   const [startReading, setStartReading] = useState(false);
   const [showMembersList, setshowMembersList] = useState(false);
@@ -303,13 +304,18 @@ const ChatInput = ({ scrollToBottom }) => {
 
   const onCommandClick = useCallback(async (command) => {
     const commandName = command.command;
-    const currentMessage = messageRef.current.value;
+    const currentMessage = `/${commandName}`;
     const tokens = (currentMessage || '').split(' ');
     const firstTokenIdx = tokens.findIndex((token) => token.match(/^\/\w*$/));
     if (firstTokenIdx !== -1) {
       tokens[firstTokenIdx] = `/${commandName}`;
       const newMessageString = tokens.join(' ');
       messageRef.current.value = newMessageString;
+
+      const cursorPosition = newMessageString.length;
+      messageRef.current.setSelectionRange(cursorPosition, cursorPosition);
+      messageRef.current.focus();
+
       setFilteredCommands([]);
     }
   }, []);
@@ -447,12 +453,18 @@ const ChatInput = ({ scrollToBottom }) => {
       setmentionIndex(
         mentionIndex + 1 >= filteredMembers.length + 2 ? 0 : mentionIndex + 1
       );
+      setCommandIndex(
+        commandIndex + 1 >= filteredCommands.length ? 0 : commandIndex + 1
+      );
     }
     if (e.key === 'ArrowUp') {
       e.preventDefault();
       setmentionIndex(
         mentionIndex - 1 < 0 ? filteredMembers.length + 1 : mentionIndex - 1
       );
+      setCommandIndex(
+        commandIndex - 1 < 0 ? filteredCommands.length - 1 : commandIndex - 1 
+      );
 
       const lastIndexOfAt = messageRef.current.value.lastIndexOf('@');
       const cursorPosition = lastIndexOfAt === -1 ? 0 : lastIndexOfAt + 1;
@@ -474,7 +486,12 @@ const ChatInput = ({ scrollToBottom }) => {
         setStartReading(false);
         setFilteredMembers([]);
         setmentionIndex(-1);
-      } else {
+      } else if(filteredCommands.length > 0){
+        const selectedCommand = filteredCommands[commandIndex];
+        onCommandClick(selectedCommand);
+
+        setCommandIndex(0);
+      }else {
         sendTypingStop();
         sendMessage();
       }
@@ -509,6 +526,7 @@ const ChatInput = ({ scrollToBottom }) => {
         )}
         {filteredCommands.length === 0 ? null : (
           <CommandsList
+            commandIndex={commandIndex}
             filteredCommands={filteredCommands}
             onCommandClick={onCommandClick}
           />

diff --git a/packages/react/src/components/CommandList/CommandsList.js b/packages/react/src/components/CommandList/CommandsList.js
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useRef } from 'react';
 import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
 import { Box } from '../Box';
@@ -9,6 +9,7 @@ import useComponentOverrides from '../../theme/useComponentOverrides';
 function CommandsList({
   className = '',
   style = {},
+  commandIndex,
   filteredCommands,
   execCommand,
   onCommandClick,
@@ -52,6 +53,8 @@ function CommandsList({
     }
   `;
 
+  const commandRef = useRef(null);
+
   const handleCommandClick = useCallback(
     (command) => {
       if (execCommand) {
@@ -67,7 +70,7 @@ function CommandsList({
   useEffect(() => {
     const handleKeyPress = (event) => {
       if (event.key === 'Enter') {
-        const selectedItem = filteredCommands[0];
+        const selectedItem = filteredCommands[commandIndex];
         handleCommandClick(selectedItem);
       }
     };
@@ -77,7 +80,17 @@ function CommandsList({
     return () => {
       document.removeEventListener('keydown', handleKeyPress);
     };
-  }, [filteredCommands, handleCommandClick]);
+  }, [commandIndex, filteredCommands, handleCommandClick]);
+
+  useEffect(() => {
+    if (commandRef.current) {
+      const selectedCommand = commandRef.current.children[commandIndex];
+      if (selectedCommand) {
+        selectedCommand.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+    }
+  }, [commandIndex]);
+
 
   return (
     <Box
@@ -86,12 +99,21 @@ function CommandsList({
       style={{ ...styleOverrides, ...style }}
       {...props}
     >
-      <ul style={{ listStyle: 'none' }}>
-        {filteredCommands.map((command) => (
+      <ul style={{ listStyle: 'none' }} ref={commandRef}>
+        {filteredCommands.map((command, index) => (
           <li
             key={command.command}
+            role='presentation'
             css={listItemStyle}
             onClick={() => handleCommandClick(command)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleCommandClick(command);
+              }
+            }}
+            style={{
+              backgroundColor: index === commandIndex && '#dddddd',
+            }}
           >
             <span style={{ justifyContent: 'space-evenly' }}>
               <span style={{ color: '#000000' }}>{command.command}</span>
@@ -107,6 +129,7 @@ function CommandsList({
 }
 
 CommandsList.propTypes = {
+  commandIndex: PropTypes.any,
   filteredCommands: PropTypes.array,
   execCommand: PropTypes.func,
   className: PropTypes.string,