fix: cleanup last token correctly

cypress/integration/textarea.js

@@ -33,7 +33,7 @@ describe("React Textarea Autocomplete", () => {
   context("basic", () => {
     beforeEach(() => {
       cy.get(".rta__textarea").clear({ force: true });
-      cy.get('[data-test="minChar"]').clear({ force: true })
+      cy.get('[data-test="minChar"]').clear({ force: true });
     });
 
     it("basic test with keyboard", () => {
@@ -115,7 +115,7 @@ describe("React Textarea Autocomplete", () => {
   context("advanced", () => {
     beforeEach(() => {
       cy.get(".rta__textarea").clear({ force: true });
-      cy.get('[data-test="minChar"]').clear({ force: true })
+      cy.get('[data-test="minChar"]').clear({ force: true });
     });
 
     it("should have place caret before outputted word", () => {
@@ -289,6 +289,16 @@ describe("React Textarea Autocomplete", () => {
       cy.get(".rta__textarea").should("have.value", "This is test fred");
     });
 
+    // https://github.com/webscopeio/react-textarea-autocomplete/issues/145
+    it("test multi-character triggers overlapping another trigger", () => {
+      cy.get(".rta__textarea").type("This is test ::something");
+      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 test2");
+    });
+
     it("change value from outside should trigger the autocomplete as well", () => {
       cy.get(".rta__autocomplete").should("not.be.visible");
       cy.get('[data-test="changeValueTo"]').click();

example/App.jsx

@@ -269,6 +269,15 @@ class App extends React.Component {
                 next: this._outputCaretNext
               }[optionsCaret]
             },
+            "::": {
+              dataProvider: token => [{ name: "test", char: "test2" }],
+              component: Item,
+              output: {
+                start: this._outputCaretStart,
+                end: this._outputCaretEnd,
+                next: this._outputCaretNext
+              }[optionsCaret]
+            },
             "@": {
               dataProvider: token =>
                 new Promise(res =>

src/Textarea.jsx

@@ -705,15 +705,18 @@ class ReactTextareaAutocomplete extends React.Component<
       });
     };
 
-    const cleanLastTrigger = () => {
-      this.lastTrigger = selectionEnd - 1;
+    const cleanLastTrigger = triggerLength => {
+      this.lastTrigger = selectionEnd - triggerLength;
 
       this._closeAutocomplete();
       setTopLeft();
     };
 
     if (selectionEnd <= this.lastTrigger) {
-      cleanLastTrigger();
+      const affectedTextareaValue = value.slice(0, selectionEnd);
+      const newTrigger = this.tokenRegExp.exec(affectedTextareaValue);
+
+      cleanLastTrigger(newTrigger ? newTrigger[0].length : 0);
     }
 
     const affectedTextareaValue = value.slice(this.lastTrigger, selectionEnd);
@@ -724,10 +727,10 @@ class ReactTextareaAutocomplete extends React.Component<
     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);
+    const newTrigger = this.tokenRegExpEnding.exec(affectedTextareaValue);
 
-    if (isNewTrigger) {
-      cleanLastTrigger();
+    if (newTrigger) {
+      cleanLastTrigger(newTrigger[0].length);
     } else if (!this._isAutocompleteOpen()) {
       this._closeAutocomplete();
     }