Merge pull request #839 from GetStream/fix-autocomplete-trigger-hightlight

CRS-494 Fix autocomplete trigger hightlight

Author: DanC5

src/components/AutoCompleteTextarea/List.js

@@ -10,13 +10,15 @@ const List = (props) => {
   const {
     className,
     component,
+    currentTrigger,
     dropdownScroll,
     getSelectedItem,
     getTextToReplace,
     itemClassName,
     itemStyle,
     onSelect,
     style,
+    selectionEnd,
     SuggestionItem = Item,
     value: propValue,
     values,
@@ -123,7 +125,10 @@ const List = (props) => {
   const restructureItem = (item) => {
     const matched = item.name || item.id;
 
-    const editedPropValue = escapeRegExp(propValue.slice(1));
+    const textBeforeCursor = propValue.slice(0, selectionEnd);
+    const triggerIndex = textBeforeCursor.lastIndexOf(currentTrigger);
+    const editedPropValue = escapeRegExp(textBeforeCursor.slice(triggerIndex + 1));
+
     const parts = matched.split(new RegExp(`(${editedPropValue})`, 'gi'));
 
     const itemNameParts = { match: editedPropValue, parts };

src/components/AutoCompleteTextarea/Textarea.js

@@ -194,15 +194,7 @@ class ReactTextareaAutocomplete extends React.Component {
 
     const textToModify = textareaValue.slice(0, selectionEnd);
 
-    // It's important to escape the currentTrigger char for chars like [, (,...
-    const findTriggerRegExp = new RegExp(`\\${currentTrigger}${`[^\\${currentTrigger}${'\\s'}]`}*`);
-    // reverse the string so we can easily find the first index of the currentTrigger
-    const reversedString = textToModify.split('').reverse().join('');
-    // find the first instance of currentTrigger (-1 if not found)
-    const distanceFromEndOfString = reversedString.search(findTriggerRegExp) + 1;
-    // if found, distract from the length of the string to revert the position back to an actual string index.
-    const startOfTokenPosition =
-      distanceFromEndOfString === -1 ? 0 : textToModify.length - distanceFromEndOfString;
+    const startOfTokenPosition = textToModify.lastIndexOf(currentTrigger);
 
     // we add space after emoji is selected if a caret position is next
     const newTokenString = newToken.caretPosition === 'next' ? `${newToken.text} ` : newToken.text;
@@ -635,12 +627,14 @@ class ReactTextareaAutocomplete extends React.Component {
             <SuggestionList
               className={listClassName}
               component={component}
+              currentTrigger={currentTrigger}
               dropdownScroll={this._dropdownScroll}
               getSelectedItem={selectedItem}
               getTextToReplace={textToReplace}
               itemClassName={itemClassName}
               itemStyle={itemStyle}
               onSelect={this._onSelect}
+              selectionEnd={this.state.selectionEnd}
               SuggestionItem={SuggestionItem}
               value={value}
               values={suggestionData}