fix(autocomplete): position autocomplete correctly (#87)

Fixed position of the autocomplete when the textarea is scrolled

CLOSE #86

Author: jukben

__tests__/__snapshots__/index.spec.js.snap

@@ -14,6 +14,7 @@ exports[`object-based items match the snapshot 1`] = `
     onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}
+    onScroll={[Function]}
     onSelect={[Function]}
     placeholder="Write a message."
     style={
@@ -29,6 +30,7 @@ exports[`object-based items match the snapshot 1`] = `
 exports[`object-based items match the snapshot of dropdown, list, and item 1`] = `
 <div
   class="rta__autocomplete "
+  style="top: 0px;"
 >
   <ul
     class="rta__list my-rta-list"
@@ -171,6 +173,7 @@ exports[`object-based items with keys match the snapshot 1`] = `
     onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}
+    onScroll={[Function]}
     onSelect={[Function]}
     placeholder="Write a message."
     style={
@@ -186,6 +189,7 @@ exports[`object-based items with keys match the snapshot 1`] = `
 exports[`object-based items with keys match the snapshot of dropdown, list, and item 1`] = `
 <div
   class="rta__autocomplete "
+  style="top: 0px;"
 >
   <ul
     class="rta__list my-rta-list"
@@ -367,6 +371,7 @@ exports[`object-based items without keys and custom unique generator match the s
     onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}
+    onScroll={[Function]}
     onSelect={[Function]}
     placeholder="Write a message."
     value="Controlled text"
@@ -383,6 +388,7 @@ exports[`string-based items w/o output fn match match the snapshot 1`] = `
     onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}
+    onScroll={[Function]}
     onSelect={[Function]}
     placeholder="Write a message."
     style={
@@ -404,6 +410,7 @@ exports[`string-based items with output fn match match the snapshot 1`] = `
     onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}
+    onScroll={[Function]}
     onSelect={[Function]}
     placeholder="Write a message."
     style={

src/Textarea.jsx

@@ -508,7 +508,16 @@ class ReactTextareaAutocomplete extends React.Component<
       // if we have single char - trigger it means we want to re-position the autocomplete
       lastToken.length === 1
     ) {
-      this.setState(getCaretCoordinates(textarea, selectionEnd));
+      const { top: newTop, left: newLeft } = getCaretCoordinates(
+        textarea,
+        selectionEnd
+      );
+
+      this.setState({
+        // make position relative to textarea
+        top: newTop - this.textareaRef.scrollTop || 0,
+        left: newLeft,
+      });
     }
 
     this.setState(
@@ -567,6 +576,10 @@ class ReactTextareaAutocomplete extends React.Component<
     }
   };
 
+  _onScrollHandler = () => {
+    this._closeAutocomplete();
+  };
+
   _dropdownScroll = (item: HTMLDivElement) => {
     const { scrollToItem } = this.props;
 
@@ -638,6 +651,7 @@ class ReactTextareaAutocomplete extends React.Component<
           className={`rta__textarea ${className || ''}`}
           onChange={this._changeHandler}
           onSelect={this._selectHandler}
+          onScroll={this._onScrollHandler}
           onClick={
             // The textarea itself is outside the autoselect dropdown.
             this._onClickAndBlurHandler