fix(textarea): Fix scroll position for chrome (#97)

superandrew213 · jukben · commit fbf561718752 · 2018-11-07T21:27:31.000-08:00
Chrome does not maintain scroll position after item is selected by clicking to the item. **To replicate:** On chrome browser go [here](https://codepen.io/jukben/pen/bYZqvR) and enter a couple of lines of text. Scroll to the top and add `:smile`. **Solution** Just save scroll position before and apply it after caret position has been set. 2 other solutions have been suggested here: https://stackoverflow.com/questions/7464282/javascript-scroll-to-selection-after-using-textarea-setselectionrange-in-chrome I couldn't get them to work properly. One doesn't work with line breaks and the other one doesn't scroll to the exact same position user was before they selected one of the items.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -125,6 +125,16 @@
         "bug",
         "code"
       ]
+    },
+    {
+      "login": "superandrew213",
+      "name": "Andrew Shini",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/13059204?v=4",
+      "profile": "https://github.com/superandrew213",
+      "contributions": [
+        "bug",
+        "code"
+      ]
     }
   ],
   "repoType": "github"
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ Enhanced textarea to achieve autocomplete functionality.
 
 [![MIT License][license-badge]][License]
 [![PRs Welcome][prs-badge]](#Development)
-[![All Contributors](https://img.shields.io/badge/all_contributors-12-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors)
 [![npm](https://img.shields.io/npm/dw/@webscopeio/react-textarea-autocomplete.svg?style=flat-square)]()
 <hr>
 
@@ -247,7 +247,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 <!-- prettier-ignore -->
 | [<img src="https://avatars3.githubusercontent.com/u/8135252?v=4" width="100px;"/><br /><sub><b>Jakub Beneš</b></sub>](https://jukben.cz)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=jukben "Code") [📖](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=jukben "Documentation") [🎨](#design-jukben "Design") [🤔](#ideas-jukben "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/3114719?v=4" width="100px;"/><br /><sub><b>Andrey Taktaev</b></sub>](https://github.com/JokerNN)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=JokerNN "Code") | [<img src="https://avatars0.githubusercontent.com/u/10706203?v=4" width="100px;"/><br /><sub><b>Marcin Lichwała</b></sub>](https://github.com/marcinlichwala)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=marcinlichwala "Code") [📖](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=marcinlichwala "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/9276511?v=4" width="100px;"/><br /><sub><b>Davidson Nascimento</b></sub>](https://github.com/davidsonsns)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=davidsonsns "Code") | [<img src="https://avatars1.githubusercontent.com/u/7477359?v=4" width="100px;"/><br /><sub><b>KajMagnus</b></sub>](http://www.effectivediscussions.org/)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Akajmagnus "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=kajmagnus "Code") | [<img src="https://avatars2.githubusercontent.com/u/1083817?v=4" width="100px;"/><br /><sub><b>Ján Vorčák</b></sub>](https://twitter.com/janvorcak)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Ajvorcak "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=jvorcak "Code") | [<img src="https://avatars2.githubusercontent.com/u/9800850?v=4" width="100px;"/><br /><sub><b>Mateusz Burzyński</b></sub>](https://github.com/Andarist)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=Andarist "Code") [📦](#platform-Andarist "Packaging/porting to new platform") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
-| [<img src="https://avatars0.githubusercontent.com/u/35139777?v=4" width="100px;"/><br /><sub><b>Deepak Pai</b></sub>](https://github.com/debugpai2)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Adebugpai2 "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=debugpai2 "Code") | [<img src="https://avatars0.githubusercontent.com/u/2336595?v=4" width="100px;"/><br /><sub><b>Aleck Landgraf</b></sub>](http://aleck.me)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=alecklandgraf "Code") | [<img src="https://avatars3.githubusercontent.com/u/8123356?v=4" width="100px;"/><br /><sub><b>Serguei Okladnikov</b></sub>](https://github.com/oklas)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Aoklas "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=oklas "Code") | [<img src="https://avatars1.githubusercontent.com/u/2987177?v=4" width="100px;"/><br /><sub><b>Michal Zochowski</b></sub>](https://github.com/michauzo)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Amichauzo "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=michauzo "Code") | [<img src="https://avatars2.githubusercontent.com/u/1263650?v=4" width="100px;"/><br /><sub><b>Igor Sachivka</b></sub>](https://github.com/isachivka)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Aisachivka "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=isachivka "Code") |
+| [<img src="https://avatars0.githubusercontent.com/u/35139777?v=4" width="100px;"/><br /><sub><b>Deepak Pai</b></sub>](https://github.com/debugpai2)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Adebugpai2 "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=debugpai2 "Code") | [<img src="https://avatars0.githubusercontent.com/u/2336595?v=4" width="100px;"/><br /><sub><b>Aleck Landgraf</b></sub>](http://aleck.me)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=alecklandgraf "Code") | [<img src="https://avatars3.githubusercontent.com/u/8123356?v=4" width="100px;"/><br /><sub><b>Serguei Okladnikov</b></sub>](https://github.com/oklas)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Aoklas "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=oklas "Code") | [<img src="https://avatars1.githubusercontent.com/u/2987177?v=4" width="100px;"/><br /><sub><b>Michal Zochowski</b></sub>](https://github.com/michauzo)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Amichauzo "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=michauzo "Code") | [<img src="https://avatars2.githubusercontent.com/u/1263650?v=4" width="100px;"/><br /><sub><b>Igor Sachivka</b></sub>](https://github.com/isachivka)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Aisachivka "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=isachivka "Code") | [<img src="https://avatars3.githubusercontent.com/u/13059204?v=4" width="100px;"/><br /><sub><b>Andrew Shini</b></sub>](https://github.com/superandrew213)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Asuperandrew213 "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=superandrew213 "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
diff --git a/src/Textarea.jsx b/src/Textarea.jsx
@@ -204,7 +204,15 @@ class ReactTextareaAutocomplete extends React.Component<
         this.textareaRef.dispatchEvent(e);
         if (onChange) onChange(e);
 
+        const scrollTop = this.textareaRef.scrollTop;
         this.setCaretPosition(newCaretPosition);
+        /*
+          Chrome does not maintain scroll position
+          Relevant discussion https://github.com/webscopeio/react-textarea-autocomplete/pull/97
+        */
+        if (window.chrome) {
+          this.textareaRef.scrollTop = scrollTop;
+        }
       }
     );
     this._closeAutocomplete();
