fix(listener): refCount instead of flag, +tests (#73) (#74)

I've added one more conditilonally additional instance to test-example app. And also I added the cypress tests which add and remove the instance and many tests falls. This fix makes everything work fine. This close the #73.

Author: oklas

cypress/integration/textarea.js

@@ -42,6 +42,15 @@ describe('React Textarea Autocomplete', () => {
         .should('have.value', 'This is test 🤣');
     });
 
+    it('basic keyboard test after unmounting second instance', () => {
+      cy.get('[data-test="showSecondTextarea"]').click();
+      cy.get('[data-test="showSecondTextarea"]').click();
+      cy
+        .get('.rta__textarea')
+        .type('This is test :ro{downarrow}{enter}')
+        .should('have.value', 'This is test 🤣');
+    });
+
     it('should change only correct part of the word', () => {
       cy
         .get('.rta__textarea')

example/App.jsx

@@ -31,6 +31,7 @@ class App extends React.Component {
     text: '',
     optionsCaret: 'start',
     actualTokenInProvider: '',
+    showSecondTextarea: false,
   };
 
   _handleOptionsCaretEnd = () => {
@@ -57,6 +58,12 @@ class App extends React.Component {
     }));
   };
 
+  _handleShowSecondTextarea = () => {
+    this.setState(({ showSecondTextarea }) => ({
+      showSecondTextarea: !showSecondTextarea,
+    }));
+  };
+
   _handleMovePopupAsYouType = () => {
     this.setState(({ movePopupAsYouType }) => ({
       movePopupAsYouType: !movePopupAsYouType,
@@ -116,6 +123,7 @@ class App extends React.Component {
       clickoutsideOption,
       movePopupAsYouType,
       actualTokenInProvider,
+      showSecondTextarea,
       text,
     } = this.state;
 
@@ -163,6 +171,17 @@ class App extends React.Component {
             Close when click outside
           </label>
         </div>
+        <div>
+          <label>
+            <input
+              data-test="showSecondTextarea"
+              type="checkbox"
+              defaultChecked={showSecondTextarea}
+              onChange={this._handleShowSecondTextarea}
+            />
+            Show second textarea
+          </label>
+        </div>
         <div>
           <label>
             <input
@@ -289,6 +308,35 @@ class App extends React.Component {
             },
           }}
         />
+        {!showSecondTextarea ? null :
+          <ReactTextareaAutocomplete
+            style={{
+              padding: 5,
+            }}
+            containerStyle={{
+              marginTop: 20,
+              width: 400,
+              height: 100,
+              margin: '20px auto',
+            }}
+            loadingComponent={Loading}
+            trigger={{
+              ':': {
+                dataProvider: token =>
+                  emoji(token)
+                    .slice(0, 10)
+                    .filter(({ char }) => char)
+                    .map(({ name, char }) => ({ name, char })),
+                component: Item,
+                output: {
+                  start: this._outputCaretStart,
+                  end: this._outputCaretEnd,
+                  next: this._outputCaretNext,
+                }[optionsCaret],
+              },
+            }}
+          />
+        }
       </div>
     );
   }

package.json

@@ -57,7 +57,7 @@
     "flow-bin": "^0.60.1",
     "html-webpack-plugin": "^2.30.1",
     "husky": "^0.14.3",
-    "jest": "^21.2.1",
+    "jest": "^23.2.0",
     "lint-staged": "^6.0.0",
     "prettier": "^1.8.2",
     "react": "^15.6.1",

setupJest.js

@@ -2,3 +2,5 @@
  * Polyfill for CI
  */
 import 'babel-polyfill';
+
+window.HTMLElement.prototype.scrollIntoView = function() {};

src/listener.js

@@ -16,14 +16,14 @@ class Listener {
     [number]: {| keyCode: Array<number>, fn: Function |},
   };
 
-  isListening: boolean;
+  refCount: number;
 
   f: Function;
 
   constructor() {
     this.index = 0;
     this.listeners = {};
-    this.isListening = false;
+    this.refCount = 0;
 
     this.f = (e: KeyboardEvent) => {
       const code = e.keyCode || e.which;
@@ -35,16 +35,19 @@ class Listener {
   }
 
   startListen = () => {
-    if (!this.isListening) {
+    if (!this.refCount) {
       // prevent multiple listeners in case of multiple TextareaAutocomplete components on page
       document.addEventListener('keydown', this.f);
-      this.isListening = true;
     }
+    this.refCount++;
   };
 
   stopListen = () => {
-    document.removeEventListener('keydown', this.f);
-    this.isListening = false;
+    this.refCount--;
+    if (!this.refCount) {
+      // prevent disable listening in case of multiple TextareaAutocomplete components on page
+      document.removeEventListener('keydown', this.f);
+    }
   };
 
   add = (keyCodes: Array<number> | number, fn: Function) => {