New autocomplete behavior (#107)

This commit changes autocomplete behavior once the item is selected. The autocomplete is hidden and it's going to be shown only if you type *trigger* again. This should be more natural.

close #100 #101

Author: jukben

cypress/integration/textarea.js

@@ -289,5 +289,25 @@ describe("React Textarea Autocomplete", () => {
         "rta__autocomplete--top"
       );
     });
+
+    it("another example of advanced combo usage", () => {
+      cy.get(".rta__textarea").type("This is test ({enter}");
+      cy.get(".rta__textarea").type(".");
+      cy.get(".rta__list")
+        .get("li:nth-child(1)")
+        .click();
+      cy.get(".rta__textarea").should("have.value", "This is test (country.ID");
+    });
+
+    it("once its selected dont show the autocomplete anymore", () => {
+      cy.get(".rta__textarea").type("This is test (");
+      cy.get(".rta__autocomplete").should("be.visible");
+      cy.get(".rta__list")
+        .get("li:nth-child(1)")
+        .click();
+      cy.get(".rta__textarea").should("have.value", "This is test (country");
+      cy.get(".rta__textarea").type("somethingelse");
+      cy.get(".rta__autocomplete").should("not.be.visible");
+    });
   });
 });

example/App.jsx

@@ -327,6 +327,29 @@ class App extends React.Component {
               ],
               component: Item,
               output: this._outputCaretEnd
+            },
+            "(": {
+              dataProvider: token => [
+                { name: "country", char: "country" },
+                { name: "person", char: "person" }
+              ],
+              component: Item,
+              output: (item, trigger) => ({
+                text: `${trigger}${item.name}`,
+                caretPosition: "end"
+              })
+            },
+            ".": {
+              dataProvider: token => [
+                { name: "ID", char: "ID" },
+                { name: "name", char: "name" },
+                { name: "someProperty", char: "someProperty" }
+              ],
+              component: Item,
+              output: (item, trigger) => ({
+                text: `${trigger}${item.name}`,
+                caretPosition: "end"
+              })
             }
           }}
         />

src/Textarea.jsx

@@ -243,6 +243,7 @@ class ReactTextareaAutocomplete extends React.Component<
     }
 
     if (oldValue !== value && this.lastValueBubbledEvent !== value) {
+      this.lastTrigger = 0;
       this._changeHandler();
     }
   }
@@ -361,6 +362,11 @@ class ReactTextareaAutocomplete extends React.Component<
         dataLoading: false
       },
       () => {
+        const insertedTrigger = this.tokenRegExpEnding.exec(newTokenString);
+        const insertedTriggerModifier = insertedTrigger
+          ? insertedTrigger[0].length
+          : 1;
+        this.lastTrigger = newCaretPosition - insertedTriggerModifier;
         this.textareaRef.value = newValue;
         this._changeHandler();
 
@@ -532,6 +538,22 @@ class ReactTextareaAutocomplete extends React.Component<
         .map(a => `\\${a}`)
         .join("|")})((?:(?!\\1)[^\\s])*$)`
     );
+
+    this.tokenRegExpEnding = new RegExp(
+      `(${Object.keys(trigger)
+        // the sort is important for multi-char combos as "/kick", "/"
+        .sort((a, b) => {
+          if (a < b) {
+            return 1;
+          }
+          if (a > b) {
+            return -1;
+          }
+          return 0;
+        })
+        .map(a => `\\${a}`)
+        .join("|")})$`
+    );
   };
 
   /**
@@ -622,11 +644,28 @@ class ReactTextareaAutocomplete extends React.Component<
       value
     });
 
-    let tokenMatch = this.tokenRegExp.exec(value.slice(0, selectionEnd));
+    const cleanLastTrigger = () => {
+      this.lastTrigger = selectionEnd - 1;
+    };
+
+    if (selectionEnd <= this.lastTrigger) {
+      cleanLastTrigger();
+    }
+
+    const affectedTextareaValue = value.slice(this.lastTrigger, selectionEnd);
+
+    let tokenMatch = this.tokenRegExp.exec(affectedTextareaValue);
     let lastToken = tokenMatch && tokenMatch[0];
 
     let currentTrigger = (tokenMatch && tokenMatch[1]) || null;
 
+    // with this approach we want to know if the user just inserted a new trigger sequence
+    const isNewTrigger = this.tokenRegExpEnding.exec(affectedTextareaValue);
+
+    if (isNewTrigger) {
+      cleanLastTrigger();
+    }
+
     /*
      if we lost the trigger token or there is no following character we want to close
      the autocomplete
@@ -650,9 +689,8 @@ class ReactTextareaAutocomplete extends React.Component<
      */
     if (
       currentTrigger &&
-      value[tokenMatch.index - 1] &&
-      (trigger[currentTrigger].afterWhitespace &&
-        !value[tokenMatch.index - 1].match(/\s/))
+      trigger[currentTrigger].afterWhitespace &&
+      value[selectionEnd - 2] !== " "
     ) {
       this._closeAutocomplete();
       return;
@@ -797,6 +835,11 @@ class ReactTextareaAutocomplete extends React.Component<
 
   lastValueBubbledEvent: string;
 
+  tokenRegExpEnding: RegExp;
+
+  // Last trigger index, to know when user selected the item and we should stop showing the autocomplete
+  lastTrigger: number = 0;
+
   render() {
     const {
       loadingComponent: Loader,

webpack.prod.config.js

@@ -5,7 +5,7 @@ process.env.NODE_ENV = "production";
 module.exports = Object.assign(webpackConfig, {
   mode: process.env.NODE_ENV,
   output: {
-    path: __dirname + "/example-build",
+    path: `${__dirname}/example-build`,
     filename: "main.js"
   }
 });