Fix correct event propagation (#114)

jukben · web-flow · commit 2294bdb7728e · 2019-01-08T21:46:41.000+01:00
* Fix correct event propagation

* Update readme to reflect the change

* Be more defensive for tests
diff --git a/README.md b/README.md
@@ -50,7 +50,6 @@ or there is UMD build available. [Check out this pen as example](https://codepen
 | scrollToItem           | boolean \| (container: HTMLDivElement, item: HTMLDivElement) => void) | Defaults to true. With default implementation it will scroll the dropdown every time when the item gets out of the view.                                      |
 | minChar                | Number                                                                | Number of characters that user should type for trigger a suggestion. Defaults to 1.                                                                           |
 | onCaretPositionChange  | Function: (number) => void                                            | Listener called every time the textarea's caret position is changed. The listener is called with one attribute - caret position denoted by an integer number. |
-| closeOnClickOutside    | boolean                                                               | When it's true autocomplete will close when use click outside. Defaults to false.                                                                             |
 | movePopupAsYouType     | boolean                                                               | When it's true the textarea will move along with a caret as a user continues to type. Defaults to false.                                                      |
 | boundariesElement      | string \| HTMLElement                                                 | Element which should prevent autocomplete to overflow. Defaults to _body_.                                                                                    |
 | style                  | Style Object                                                          | Style's of textarea                                                                                                                                           |
diff --git a/cypress/integration/textarea.js b/cypress/integration/textarea.js
@@ -202,26 +202,11 @@ describe("React Textarea Autocomplete", () => {
     });
 
     it("should close the textarea when click outside happens", () => {
-      cy.get('[data-test="clickoutsideOption"]').click();
-
       cy.get(".rta__textarea").type("This is test :ro{uparrow}{uparrow}");
 
       cy.get(".rta__autocomplete").should("be.visible");
 
-      cy.get('[data-test="clickoutsideOption"]').click();
-
-      cy.get(".rta__autocomplete").should("not.be.visible");
-    });
-
-    it("should be possible to select item with click with closeOnClickOutside option enabled", () => {
-      cy.get('[data-test="clickoutsideOption"]').click();
-
-      cy.get(".rta__textarea")
-        .type("This is test :ro")
-        .get("li:nth-child(2)")
-        .click();
-
-      cy.get(".rta__textarea").should("have.value", "This is test 🙄");
+      cy.get('[data-test="dummy"]').click();
 
       cy.get(".rta__autocomplete").should("not.be.visible");
     });
@@ -309,5 +294,19 @@ describe("React Textarea Autocomplete", () => {
       cy.get(".rta__textarea").type("somethingelse");
       cy.get(".rta__autocomplete").should("not.be.visible");
     });
+
+    it("event is successfully blocked", () => {
+      cy.window().then(async win => {
+        const spy = cy.spy(win.console, "log");
+
+        await cy
+          .get(".rta__textarea")
+          .type(":ro{uparrow}{uparrow}{enter}")
+          .then(e => {
+            // the last console.log call should not be `pressed "enter"` because that event is blocked because it's happening in autocomplete.
+            expect(spy.lastCall.args).to.eql([`pressed "o"`]);
+          });
+      });
+    });
   });
 });
diff --git a/example/App.jsx b/example/App.jsx
@@ -25,7 +25,6 @@ const Loading = ({ data }: LoadingProps) => <div>Loading</div>;
 class App extends React.Component {
   state = {
     optionsCaretStart: false,
-    clickoutsideOption: false,
     caretPosition: 0,
     movePopupAsYouType: false,
     text: "",
@@ -52,12 +51,6 @@ class App extends React.Component {
     }));
   };
 
-  _handleClickoutsideOption = () => {
-    this.setState(({ clickoutsideOption }) => ({
-      clickoutsideOption: !clickoutsideOption
-    }));
-  };
-
   _handleShowSecondTextarea = () => {
     this.setState(({ showSecondTextarea }) => ({
       showSecondTextarea: !showSecondTextarea
@@ -126,7 +119,6 @@ class App extends React.Component {
     const {
       optionsCaret,
       caretPosition,
-      clickoutsideOption,
       movePopupAsYouType,
       actualTokenInProvider,
       showSecondTextarea,
@@ -166,17 +158,6 @@ class App extends React.Component {
           />
           <label htmlFor="caretNext">Place caret after word with a space</label>
         </div>
-        <div>
-          <label>
-            <input
-              data-test="clickoutsideOption"
-              type="checkbox"
-              defaultChecked={clickoutsideOption}
-              onChange={this._handleClickoutsideOption}
-            />
-            Close when click outside
-          </label>
-        </div>
         <div>
           <label>
             <input
@@ -224,13 +205,16 @@ class App extends React.Component {
         <button data-test="changeValueTo" onClick={this._changeValueTo}>
           Change value to ":troph"
         </button>
+        <button data-test="dummy">dummy</button>
         <div>
           Actual token in "[" provider:{" "}
           <span data-test="actualToken">{actualTokenInProvider}</span>
         </div>
-
         <ReactTextareaAutocomplete
           className="one"
+          onKeyDown={e => {
+            console.log(`pressed "${e.key}"`);
+          }}
           ref={ref => {
             this.rtaRef = ref;
           }}
@@ -248,7 +232,6 @@ class App extends React.Component {
             margin: "20px auto"
           }}
           movePopupAsYouType={movePopupAsYouType}
-          closeOnClickOutside={clickoutsideOption}
           onCaretPositionChange={this._onCaretPositionChangeHandle}
           minChar={0}
           value={text}
diff --git a/src/Textarea.jsx b/src/Textarea.jsx
@@ -199,7 +199,6 @@ class ReactTextareaAutocomplete extends React.Component<
   TextareaState
 > {
   static defaultProps = {
-    closeOnClickOutside: false,
     movePopupAsYouType: false,
     value: null,
     minChar: 1,
@@ -238,9 +237,22 @@ class ReactTextareaAutocomplete extends React.Component<
     textToReplace: null
   };
 
+  escListenerInit = () => {
+    if (!this.escListener) {
+      this.escListener = Listeners.add(KEY_CODES.ESC, this._closeAutocomplete);
+    }
+  };
+
+  escListenerDestroy = () => {
+    if (this.escListener) {
+      Listeners.remove(this.escListener);
+      this.escListener = null;
+    }
+  };
+
   componentDidMount() {
     Listeners.add(KEY_CODES.ESC, this._closeAutocomplete);
-    Listeners.startListen();
+    Listeners.startListen(this.textareaRef);
   }
 
   componentDidUpdate({ trigger: oldTrigger, value: oldValue }: TextareaProps) {
@@ -264,7 +276,8 @@ class ReactTextareaAutocomplete extends React.Component<
   }
 
   componentWillUnmount() {
-    Listeners.stopListen();
+    this.escListenerDestroy();
+    Listeners.stopListen(this.textareaRef);
   }
 
   getSelectionPosition = (): ?{|
@@ -567,6 +580,7 @@ class ReactTextareaAutocomplete extends React.Component<
    * Close autocomplete, also clean up trigger (to avoid slow promises)
    */
   _closeAutocomplete = () => {
+    this.escListenerDestroy();
     this.setState({
       data: null,
       dataLoading: false,
@@ -600,7 +614,6 @@ class ReactTextareaAutocomplete extends React.Component<
       "listClassName",
       "itemClassName",
       "loaderClassName",
-      "closeOnClickOutside",
       "dropdownStyle",
       "dropdownClassName",
       "movePopupAsYouType"
@@ -750,6 +763,8 @@ class ReactTextareaAutocomplete extends React.Component<
       });
     }
 
+    this.escListenerInit();
+
     this.setState(
       {
         selectionEnd,
@@ -785,7 +800,7 @@ class ReactTextareaAutocomplete extends React.Component<
   };
 
   _onClickAndBlurHandler = (e: SyntheticFocusEvent<*>) => {
-    const { closeOnClickOutside, onBlur } = this.props;
+    const { onBlur } = this.props;
 
     // If this is a click: e.target is the textarea, and e.relatedTarget is the thing
     // that was actually clicked. If we clicked inside the autoselect dropdown, then
@@ -799,9 +814,7 @@ class ReactTextareaAutocomplete extends React.Component<
       return;
     }
 
-    if (closeOnClickOutside) {
-      this._closeAutocomplete();
-    }
+    this._closeAutocomplete();
 
     if (onBlur) {
       e.persist();
@@ -832,6 +845,13 @@ class ReactTextareaAutocomplete extends React.Component<
     scrollToItem(this.dropdownRef, item);
   };
 
+  _isAutocompleteOpen = () => {
+    const { dataLoading, currentTrigger } = this.state;
+    const suggestionData = this._getSuggestions();
+
+    return (dataLoading || suggestionData) && currentTrigger;
+  };
+
   props: TextareaProps;
 
   textareaRef: HTMLInputElement;
@@ -847,6 +867,8 @@ class ReactTextareaAutocomplete extends React.Component<
   // Last trigger index, to know when user selected the item and we should stop showing the autocomplete
   lastTrigger: number = 0;
 
+  escListener: ?number = null;
+
   render() {
     const {
       loadingComponent: Loader,
@@ -869,12 +891,12 @@ class ReactTextareaAutocomplete extends React.Component<
       left,
       top,
       dataLoading,
-      currentTrigger,
       component,
       value,
       textToReplace
     } = this.state;
 
+    const isAutocompleteOpen = this._isAutocompleteOpen();
     const suggestionData = this._getSuggestions();
 
     return (
@@ -902,7 +924,7 @@ class ReactTextareaAutocomplete extends React.Component<
           value={value}
           style={style}
         />
-        {(dataLoading || suggestionData) && currentTrigger && (
+        {isAutocompleteOpen && (
           <Autocomplete
             innerRef={ref => {
               // $FlowFixMe
@@ -1021,7 +1043,6 @@ ReactTextareaAutocomplete.propTypes = {
   className: PropTypes.string,
   containerStyle: PropTypes.object,
   containerClassName: PropTypes.string,
-  closeOnClickOutside: PropTypes.bool,
   style: PropTypes.object,
   listStyle: PropTypes.object,
   itemStyle: PropTypes.object,
diff --git a/src/listener.js b/src/listener.js
@@ -23,31 +23,32 @@ class Listener {
   constructor() {
     this.index = 0;
     this.listeners = {};
-    this.refCount = 0;
 
     this.f = (e: KeyboardEvent) => {
+      if (!e) return;
+
       const code = e.keyCode || e.which;
       for (let i = 0; i < this.index; i += 1) {
         const { keyCode, fn } = this.listeners[i];
-        if (keyCode.includes(code)) fn(e);
+        if (keyCode.includes(code)) {
+          e.stopPropagation();
+          e.preventDefault();
+          fn(e);
+        }
       }
     };
   }
 
-  startListen = () => {
-    if (!this.refCount) {
-      // prevent multiple listeners in case of multiple TextareaAutocomplete components on page
-      document.addEventListener("keydown", this.f);
-    }
-    this.refCount++;
+  startListen = (ref: HTMLInputElement) => {
+    if (!ref) return;
+
+    ref.addEventListener("keydown", this.f);
   };
 
-  stopListen = () => {
-    this.refCount--;
-    if (!this.refCount) {
-      // prevent disable listening in case of multiple TextareaAutocomplete components on page
-      document.removeEventListener("keydown", this.f);
-    }
+  stopListen = (ref: HTMLInputElement) => {
+    if (!ref) return;
+
+    ref.removeEventListener("keydown", this.f);
   };
 
   add = (keyCodes: Array<number> | number, fn: Function) => {
