Search result do not scroll on keyboard mouse down/up, leaving selected element hidden


(lid) #1

Replication
open search, and search for a term with enough results.
Use keyboard arrow-down to go to the last item in the list.

Result
Item will be selected but not visible.


(lid) #2

Something like this should fix it, testable in console.

$('body').on('keyup.search', function(e) {
    if ($('#search-dropdown').is(':visible')) {
    	if (e.which == 40 || e.which == 38){
    		var searchController = Discourse.__container__.lookup("controller:search");
		var selectedIndex    = searchController.get("selectedIndex");
    		var $searchContainer = $("#search-dropdown");
			
		var elm = $("#search-dropdown li.selected"); //get the selected element
		var elm_position = elm.position();
		var elm_bottom = elm_position.top+elm.height();
		if ( $searchContainer[0].scrollTop + $("#search-dropdown").height() <  elm_bottom + $searchContainer[0].scrollTop  ){
				$searchContainer[0].scrollTop = elm_bottom - $searchContainer.height()+ $searchContainer[0].scrollTop;
			} else if ( elm_position.top < 0){
				$searchContainer[0].scrollTop += elm_position.top -15;
			}
			
			if ( (typeof selectedIndex !== "undefined") && selectedIndex == 0 && $searchContainer[0].scrollTop > 0){
			$("#search-dropdown").animate({scrollTop:0},500,'swing');
			}
		}
	}
	
});

(Sam Saffron) #3

Tab works fine now :slight_smile: we can close this.


(Sam Saffron) #4