Modify #209 to work correctly with margins/paddings.

twitter · Apr 25, 2013 · 6b0f086 · 6b0f086
1 parent 1611f46
commit 6b0f086
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 16 deletions.
diff --git a/src/dropdown_view.js b/src/dropdown_view.js
@@ -95,8 +95,9 @@ var DropdownView = (function() {
 
       $underCursor = $suggestions.eq(nextIndex).addClass('tt-is-under-cursor');
 
-      // make the cursor visible in view
-      this._ensureCursorVisible($cur, $underCursor);
+      // in the case of scrollable overflow
+      // make sure the cursor is visible in the menu
+      this._ensureVisibility($underCursor);
 
       this.trigger('cursorMoved', extractSuggestion($underCursor));
     },
@@ -105,20 +106,20 @@ var DropdownView = (function() {
       return this.$menu.find('.tt-suggestions > .tt-suggestion');
     },
 
-    _ensureCursorVisible: function($cur, $underCursor) {
-      var $view, viewHeight, cursorTop, cursorHeight, cursorBottom;
-
-      cursorTop = $underCursor.position().top;
-      $view = $underCursor.closest('.tt-suggestions');
-      if (cursorTop < 0) {
-        $view.scrollTop($view.scrollTop() + cursorTop);
-      } else {
-        viewHeight = $view.height();
-        cursorHeight = $underCursor.outerHeight();
-        cursorBottom = cursorTop + cursorHeight;
-        if (viewHeight < cursorBottom) {
-          $view.scrollTop($view.scrollTop() + (cursorBottom - viewHeight));
-        }
+    _ensureVisibility: function($el) {
+      var menuHeight = this.$menu.height() +
+            parseInt(this.$menu.css('paddingTop'), 10) +
+            parseInt(this.$menu.css('paddingBottom'), 10),
+          menuScrollTop = this.$menu.scrollTop(),
+          elTop = $el.position().top,
+          elBottom = elTop + $el.outerHeight(true);
+
+      if (elTop < 0) {
+        this.$menu.scrollTop(menuScrollTop + elTop);
+      }
+
+      else if (menuHeight < elBottom) {
+        this.$menu.scrollTop(menuScrollTop + (elBottom - menuHeight));
       }
     },
 

diff --git a/test/dropdown_view_spec.js b/test/dropdown_view_spec.js
@@ -247,6 +247,12 @@ describe('DropdownView', function() {
         renderTestDataset(this.dropdownView, true);
       });
 
+      it('should ensure the cursor is visible', function() {
+        spyOn(this.dropdownView, '_ensureVisibility');
+        this.dropdownView.moveCursorUp();
+        expect(this.dropdownView._ensureVisibility).toHaveBeenCalled();
+      });
+
       describe('if no suggestion is under the cursor', function() {
         beforeEach(function() {
           this.dropdownView.moveCursorUp();
@@ -346,6 +352,12 @@ describe('DropdownView', function() {
         renderTestDataset(this.dropdownView, true);
       });
 
+      it('should ensure the cursor is visible', function() {
+        spyOn(this.dropdownView, '_ensureVisibility');
+        this.dropdownView.moveCursorUp();
+        expect(this.dropdownView._ensureVisibility).toHaveBeenCalled();
+      });
+
       describe('if no suggestion is under the cursor', function() {
         beforeEach(function() {
           this.dropdownView.moveCursorDown();