fixed scroll issues

oom-components · Jul 3, 2017 · c294231 · c294231
1 parent 3501032
commit c294231
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,7 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Changed
 
-* Do not filter the suggestions in ajaxSource, it's supossed to be filtered by the server. 
+* Do not filter the suggestions in ajaxSource, it's supossed to be filtered by the server.
 
 ### Fixed
 

diff --git a/demo/index.html b/demo/index.html
@@ -13,6 +13,10 @@
 		color: blue;
 		font-weight: bold;
 	}
+	.block {
+		background: gray;
+		height: 100vh;
+	}
 </style>
 
 <body>
@@ -64,6 +68,10 @@
 		<button type="submit">Send</button>
 	</form>
 
+	<div class="block">
+
+	</div>
+
 	<script type="text/javascript" src="script.dist.js"></script>
 </body>
 </html>
diff --git a/src/Suggestion.js b/src/Suggestion.js
@@ -41,7 +41,7 @@ export default class Suggestion {
         this.element.classList.add('is-selected');
 
         if (parentRect.top - rect.top > 0) {
-            this.element.scrollIntoView(true);
+            parent.scrollTop -= parentRect.top - rect.top;
         } else if (parentRect.bottom < rect.bottom) {
             this.element.scrollIntoView(false);
         }

diff --git a/src/index.js b/src/index.js
@@ -27,16 +27,18 @@ export class Suggestions {
 
             switch (code) {
                 case 'ArrowDown':
+                    event.preventDefault();
+
                     if (!this.source.isClosed) {
                         this.source.selectNext();
-                        event.preventDefault();
                     }
                     break;
 
                 case 'ArrowUp':
+                    event.preventDefault();
+
                     if (!this.source.isClosed) {
                         this.source.selectPrevious();
-                        event.preventDefault();
                     }
                     break;