From ad6c985a842a9ec65a977cb159708873dfa91e3a Mon Sep 17 00:00:00 2001
From: Americo Quiroz <Americo.Quiroz@jalasoft.com>
Date: Tue, 30 Apr 2024 14:13:40 -0400
Subject: [PATCH] Fix_Mentions_mobile_issue

---
 src/Editor/index.js                        |  2 +-
 src/decorators/Mention/Suggestion/index.js | 32 +++++++++++++++-------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/Editor/index.js b/src/Editor/index.js
index 08bf68d54..2ddede7a3 100644
--- a/src/Editor/index.js
+++ b/src/Editor/index.js
@@ -350,7 +350,7 @@ class WysiwygEditor extends Component {
 
   focusEditor = () => {
     setTimeout(() => {
-      this.editor.focus();
+      this.editor?.focus();
     });
   };
 
diff --git a/src/decorators/Mention/Suggestion/index.js b/src/decorators/Mention/Suggestion/index.js
index f51b92d13..2be62bb34 100644
--- a/src/decorators/Mention/Suggestion/index.js
+++ b/src/decorators/Mention/Suggestion/index.js
@@ -222,14 +222,17 @@ function getSuggestionComponent() {
         });
     };
 
-    addMention = () => {
-      const { activeOption } = this.state;
+    addMention = (mention) => {
+      if (!mention) return;
       const editorState = config.getEditorState();
       const { onChange, separator, trigger } = config;
-      const selectedMention = this.filteredSuggestions[activeOption];
-      if (selectedMention) {
-        addMention(editorState, onChange, separator, trigger, selectedMention);
-      }
+      addMention(editorState, onChange, separator, trigger, mention);
+      // Now we receive the mention as method param, since it comes from the same structure
+      // The following block was generating error -> filteredSuggestions sometimes was undefined
+      // const selectedMention = this.filteredSuggestions[activeOption];
+      // if (selectedMention) {
+      // addMention(editorState, onChange, separator, trigger, mention);
+      // }
     };
 
     render() {
@@ -248,7 +251,7 @@ function getSuggestionComponent() {
           {showSuggestions && (
             <span
               className={classNames(
-                'rdw-suggestion-dropdown',
+                "rdw-suggestion-dropdown",
                 dropdownClassName
               )}
               contentEditable="false"
@@ -260,14 +263,23 @@ function getSuggestionComponent() {
                 <span
                   key={index}
                   spellCheck={false}
-                  onClick={this.addMention}
+                  onClick={(e) => {
+                    e.preventDefault(),
+                      e.stopPropagation(),
+                      this.addMention(suggestion);
+                  }}
+                  onTouchEnd={(e) => {
+                    e.preventDefault(),
+                      e.stopPropagation(),
+                      this.addMention(suggestion);
+                  }}
                   data-index={index}
                   onMouseEnter={this.onOptionMouseEnter}
                   onMouseLeave={this.onOptionMouseLeave}
                   className={classNames(
-                    'rdw-suggestion-option',
+                    "rdw-suggestion-option",
                     optionClassName,
-                    { 'rdw-suggestion-option-active': index === activeOption }
+                    { "rdw-suggestion-option-active": index === activeOption }
                   )}
                 >
                   {suggestion.text}