From c661f091c5e41e96527affec1d9a3b3ba409d343 Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 17 Dec 2014 16:59:50 -0500 Subject: [PATCH] Fixes #1393 Dropdown shows/hides on window focus/blur. Adds window blur detection to element blur --- RELEASE-NOTES.md | 1 + src/definitions/modules/dropdown.js | 44 ++++++++++++++++------------- 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 216318633..10e92a4f5 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -21,6 +21,7 @@ **Bugs** - **Button** - Button "or" positioning variables have been adjusted to be automatically calculated without magic numbers +- **Dropdown** - Dropdown now always scrolls to active element on menu open, calculates position with new ``loading`` class - **Dropdown** - Fix bug in position of sub menus with ``floating dropdown`` - **Form** - Fixed positioning of horizontal field groups, aka ``fields`` for mobile. - **Grid** - ``stackable grid`` now display correctly when nested inside a different ``stackable grid`` diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index 5b9046da2..74ebfe5bb 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -60,7 +60,6 @@ $.fn.dropdown = function(parameters) { activated = false, itemActivated = false, - element = this, instance = $module.data(moduleNamespace), @@ -296,10 +295,6 @@ $.fn.dropdown = function(parameters) { mouseEvents: function() { module.verbose('Mouse detected binding mouse events'); - $document - .on('visibilitychange' + elementNamespace, module.event.visibilityChange) - ; - if( module.is.searchSelection() ) { $module .on('mousedown' + eventNamespace, selector.menu, module.event.menu.activate) @@ -437,7 +432,10 @@ $.fn.dropdown = function(parameters) { } }, blur: function(event) { - if(!activated) { + var + pageLostFocus = (document.activeElement === this) + ; + if(!activated && !pageLostFocus) { module.hide(); } }, @@ -446,13 +444,13 @@ $.fn.dropdown = function(parameters) { module.show(); }, searchBlur: function(event) { - if(!itemActivated) { + var + pageLostFocus = (document.activeElement === this) + ; + if(!itemActivated && !pageLostFocus) { module.hide(); } }, - visibilityChange: function(event) { - // - }, input: function(event) { module.set.filtered(); clearTimeout(module.timer); @@ -927,11 +925,10 @@ $.fn.dropdown = function(parameters) { } } }, - scrollPosition: function($item) { + scrollPosition: function($item, forceScroll) { var - $item = $item || module.get.activeItem(), - hasActive = ($item && $item.size() > 0), edgeTolerance = 5, + hasActive, offset, itemHeight, itemOffset, @@ -941,10 +938,17 @@ $.fn.dropdown = function(parameters) { abovePage, belowPage ; + + $item = $item || module.get.activeItem(); + hasActive = ($item && $item.size() > 0); + forceScroll = (forceScroll !== undefined) + ? forceScroll + : false + ; + if($item && hasActive) { if(!$menu.hasClass(className.visible)) { - console.log('adddig loading'); $menu.addClass(className.loading); } @@ -957,10 +961,12 @@ $.fn.dropdown = function(parameters) { belowPage = menuScroll + menuHeight < (offset + edgeTolerance); abovePage = ((offset - edgeTolerance) < menuScroll); module.debug('Scrolling to active item', offset); - $menu - .scrollTop(offset) - .removeClass(className.loading) - ; + if(abovePage || belowPage || forceScroll) { + $menu + .scrollTop(offset) + .removeClass(className.loading) + ; + } } }, text: function(text) { @@ -1134,7 +1140,7 @@ $.fn.dropdown = function(parameters) { ? callback : function(){} ; - module.set.scrollPosition(); + module.set.scrollPosition(module.get.activeItem(), true); module.verbose('Doing menu show animation', $currentMenu); if( module.is.hidden($currentMenu) || module.is.animating($currentMenu) ) { if(settings.transition == 'none') {