fix(autocomplete): fixed minChar behavior (#144)

Fixes #142

Author: jukben

cypress/integration/textarea.js

@@ -33,6 +33,7 @@ describe("React Textarea Autocomplete", () => {
   context("basic", () => {
     beforeEach(() => {
       cy.get(".rta__textarea").clear({ force: true });
+      cy.get('[data-test="minChar"]').clear({ force: true })
     });
 
     it("basic test with keyboard", () => {
@@ -114,6 +115,7 @@ describe("React Textarea Autocomplete", () => {
   context("advanced", () => {
     beforeEach(() => {
       cy.get(".rta__textarea").clear({ force: true });
+      cy.get('[data-test="minChar"]').clear({ force: true })
     });
 
     it("should have place caret before outputted word", () => {
@@ -233,8 +235,45 @@ describe("React Textarea Autocomplete", () => {
     it("show autocomplete only after whitespace", () => {
       cy.get(".rta__textarea").type("This is test;");
       cy.get(".rta__autocomplete").should("not.be.visible");
-      cy.get(".rta__textarea").type(" ;");
+      cy.get(".rta__textarea").clear({ force: true });
+
+      cy.get(".rta__textarea").type("This is test;a");
+      cy.get(".rta__autocomplete").should("not.be.visible");
+      cy.get(".rta__textarea").clear({ force: true });
+
+      cy.get(".rta__textarea").type(";");
+      cy.get(".rta__autocomplete").should("be.visible");
+      cy.get(".rta__textarea").clear({ force: true });
+
+      cy.get(".rta__textarea").type("something ;");
       cy.get(".rta__autocomplete").should("be.visible");
+      cy.get(".rta__textarea").clear({ force: true });
+
+      cy.get(".rta__textarea").type("something ;somethingmore");
+      cy.get(".rta__autocomplete").should("be.visible");
+      cy.get(".rta__textarea").clear({ force: true });
+
+      cy.get('[data-test="minChar"]').type("{uparrow}");
+
+      cy.get(".rta__textarea").type("This is test;");
+      cy.get(".rta__autocomplete").should("not.be.visible");
+      cy.get(".rta__textarea").clear({ force: true });
+
+      cy.get(".rta__textarea").type("This is test;a");
+      cy.get(".rta__autocomplete").should("not.be.visible");
+      cy.get(".rta__textarea").clear({ force: true });
+
+      cy.get(".rta__textarea").type(";a");
+      cy.get(".rta__autocomplete").should("be.visible");
+      cy.get(".rta__textarea").clear({ force: true });
+
+      cy.get(".rta__textarea").type("something ;a");
+      cy.get(".rta__autocomplete").should("be.visible");
+      cy.get(".rta__textarea").clear({ force: true });
+
+      cy.get(".rta__textarea").type("something ;somethingmore");
+      cy.get(".rta__autocomplete").should("be.visible");
+      cy.get(".rta__textarea").clear({ force: true });
     });
 
     it("test multi-character triggers and its possible combo", () => {

example/App.jsx

@@ -28,6 +28,7 @@ class App extends React.Component {
     caretPosition: 0,
     movePopupAsYouType: false,
     text: "",
+    minChar: 0,
     optionsCaret: "start",
     actualTokenInProvider: "",
     showSecondTextarea: false
@@ -81,6 +82,12 @@ class App extends React.Component {
     });
   };
 
+  _handleMinChar = ({ target: { value } }) => {
+    this.setState({
+      minChar: +value
+    });
+  };
+
   _setCaretPosition = () => {
     this.rtaRef.setCaretPosition(1);
   };
@@ -122,7 +129,8 @@ class App extends React.Component {
       movePopupAsYouType,
       actualTokenInProvider,
       showSecondTextarea,
-      text
+      text,
+      minChar
     } = this.state;
 
     return (
@@ -180,6 +188,17 @@ class App extends React.Component {
             Move popup as you type
           </label>
         </div>
+        <div>
+          <label>
+            <input
+              data-test="minChar"
+              type="number"
+              value={minChar}
+              onChange={this._handleMinChar}
+            />
+            Minimal characters typed to trigger autocomplete
+          </label>
+        </div>
         <div>
           Actual caret position:{" "}
           <span data-test="actualCaretPosition">{caretPosition}</span>
@@ -233,7 +252,7 @@ class App extends React.Component {
           }}
           movePopupAsYouType={movePopupAsYouType}
           onCaretPositionChange={this._onCaretPositionChangeHandle}
-          minChar={0}
+          minChar={minChar}
           value={text}
           onChange={this._onChangeHandle}
           trigger={{

src/Textarea.jsx

@@ -752,11 +752,14 @@ class ReactTextareaAutocomplete extends React.Component<
      * from currentTrigger not this.state.currentTrigger
      *
      * Check if the currently typed token has to be afterWhitespace, or not.
+     *
+     * This setting means that there has to be whitespace before the token (on it has to be the the first character typed into textarea)
      */
     if (
       currentTrigger &&
       trigger[currentTrigger].afterWhitespace &&
-      value[selectionEnd - 2] !== " "
+      (value[selectionEnd - lastToken.length - 1] !== " " &&
+        value[selectionEnd - lastToken.length - 1] !== undefined)
     ) {
       this._closeAutocomplete();
       return;

src/types.js

@@ -80,7 +80,7 @@ export type TextareaProps = {
   closeOnClickOutside?: boolean,
   movePopupAsYouType?: boolean,
   boundariesElement: string | HTMLElement,
-  minChar: ?number,
+  minChar: number,
   value?: string,
   style: ?Object,
   listStyle: ?Object,