CRS-442 emoji keyboard navigation

src/components/AutoCompleteTextarea/List.js

@@ -24,7 +24,7 @@ const List = (props) => {
 
   const [selectedItem, setSelectedItem] = useState(undefined);
 
-  const itemsRef = {};
+  const itemsRef = [];
 
   const isSelected = (item) => selectedItem === values.indexOf(item);
 
@@ -53,24 +53,29 @@ const List = (props) => {
     modifyText(values[selectedItem]);
   };
 
-  const selectItem = (item, keyboard = false) => {
+  const selectItem = (item) => {
     setSelectedItem(values.indexOf(item));
-    if (keyboard) dropdownScroll(itemsRef[getId(item)]);
   };
 
   const handleKeyDown = useCallback(
     (event) => {
       if (event.which === KEY_CODES.UP) {
         setSelectedItem((prevSelected) => {
           if (prevSelected === undefined) return 0;
-          return prevSelected === 0 ? values.length - 1 : prevSelected - 1;
+          const newID =
+            prevSelected === 0 ? values.length - 1 : prevSelected - 1;
+          dropdownScroll(itemsRef[newID]);
+          return newID;
         });
       }
 
       if (event.which === KEY_CODES.DOWN) {
         setSelectedItem((prevSelected) => {
           if (prevSelected === undefined) return 0;
-          return prevSelected === values.length - 1 ? 0 : prevSelected + 1;
+          const newID =
+            prevSelected === values.length - 1 ? 0 : prevSelected + 1;
+          dropdownScroll(itemsRef[newID]);
+          return newID;
         });
       }
 
@@ -123,7 +128,7 @@ const List = (props) => {
           __html: renderHeader(propValue),
         }}
       />
-      {values.map((item) => (
+      {values.map((item, i) => (
         <Item
           className={itemClassName}
           component={component}
@@ -132,7 +137,7 @@ const List = (props) => {
           onClickHandler={handleClick}
           onSelectHandler={selectItem}
           ref={(ref) => {
-            itemsRef[getId(item)] = ref;
+            itemsRef[i] = ref;
           }}
           selected={isSelected(item)}
           style={itemStyle}

src/components/AutoCompleteTextarea/Textarea.js

@@ -619,62 +619,61 @@ class ReactTextareaAutocomplete extends React.Component {
     scrollToItem(this.dropdownRef, item);
   };
 
-  render() {
+  renderSuggestionListContainer() {
     const {
-      className,
-      containerClassName,
-      containerStyle,
       disableMentions,
       dropdownClassName,
       dropdownStyle,
       itemClassName,
       itemStyle,
       listClassName,
-      style,
       SuggestionList = DefaultSuggestionList,
     } = this.props;
-
-    let { maxRows } = this.props;
-
     const { component, currentTrigger, dataLoading, value } = this.state;
 
     const selectedItem = this._getItemOnSelect();
     const suggestionData = this._getSuggestions();
     const textToReplace = this._getTextToReplace();
 
-    const SuggestionListContainer = () => {
-      if (
-        (dataLoading || suggestionData) &&
-        currentTrigger &&
-        !(disableMentions && currentTrigger === '@')
-      ) {
-        return (
-          <div
-            className={`rta__autocomplete ${dropdownClassName || ''}`}
-            ref={(ref) => {
-              this.dropdownRef = ref;
-            }}
-            style={dropdownStyle}
-          >
-            {component && suggestionData && textToReplace && (
-              <SuggestionList
-                className={listClassName}
-                component={component}
-                dropdownScroll={this._dropdownScroll}
-                getSelectedItem={selectedItem}
-                getTextToReplace={textToReplace}
-                itemClassName={itemClassName}
-                itemStyle={itemStyle}
-                onSelect={this._onSelect}
-                value={value}
-                values={suggestionData}
-              />
-            )}
-          </div>
-        );
-      }
-      return null;
-    };
+    if (
+      (dataLoading || suggestionData) &&
+      currentTrigger &&
+      !(disableMentions && currentTrigger === '@')
+    ) {
+      return (
+        <div
+          className={`rta__autocomplete ${dropdownClassName || ''}`}
+          ref={(ref) => {
+            this.dropdownRef = ref;
+          }}
+          style={dropdownStyle}
+        >
+          {component && suggestionData && textToReplace && (
+            <SuggestionList
+              className={listClassName}
+              component={component}
+              dropdownScroll={this._dropdownScroll}
+              getSelectedItem={selectedItem}
+              getTextToReplace={textToReplace}
+              itemClassName={itemClassName}
+              itemStyle={itemStyle}
+              onSelect={this._onSelect}
+              value={value}
+              values={suggestionData}
+            />
+          )}
+        </div>
+      );
+    }
+    return null;
+  }
+
+  render() {
+    const { className, containerClassName, containerStyle, style } = this.props;
+
+    let { maxRows } = this.props;
+
+    const { dataLoading, value } = this.state;
 
     if (!this.props.grow) maxRows = 1;
 
@@ -685,7 +684,7 @@ class ReactTextareaAutocomplete extends React.Component {
         }`}
         style={containerStyle}
       >
-        <SuggestionListContainer />
+        {this.renderSuggestionListContainer()}
         <Textarea
           {...this._cleanUpProps()}
           className={`rta__textarea ${className || ''}`}

src/styles/MessageList.scss

@@ -4,6 +4,8 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch; /* enable smooth scrolling on ios */
   padding: 0 0 0 0;
+  position: relative;
+  z-index: 0;
   .str-chat__reverse-infinite-scroll {
     padding-top: 75px;
   }

src/styles/index.scss

@@ -4,7 +4,7 @@
 
 // Components
 
-@import 'mml-react/src/styles/index.scss';
+@import '../../node_modules/mml-react/src/styles/index.scss';
 @import './vendor/react-file-utils.scss';
 @import './vendor/emoji-mart.scss';