Angular ui-bootstrap typeahead suggestion - scroll

Question

According to this link: problem with up / down arrow with type control (angular bootstrap UI)

I added this line to my js:

.directive('shouldFocus', function(){
  return {
   restrict: 'A',
   link: function(scope,element,attrs){
     scope.$watch(attrs.shouldFocus,function(newVal,oldVal){
       element[0].scrollIntoView(false);
     });
   }
 };
})

when scrolling, we get even more anxiety, the scroll was not vague. Before adding this code, the scroll was normal and smooth. Please help me?

Answer 1

Hi, here is another code only for the keyup event, to adjust the scroll height, while pressing the up / down key you need to add the function only to keyup in the typeahead directive in angular ui

search ('typeahead' angular ui js fireRecalculating,

function makeSureVisible(){
            $timeout(function(){
                $el = popUpEl.find('.active');
                if($el.length>0)
                {
                    var elTop, elBottom, nodeScrollTop, nodeHeight;
                    elTop = $el.position().top;
                    console.log(elTop);
                    elBottom = elTop + $el.outerHeight(true);

                    nodeScrollTop = popUpEl.scrollTop();
                    nodeHeight = popUpEl.height() + parseInt(popUpEl.css("paddingTop"), 10) + parseInt(popUpEl.css("paddingBottom"), 10);
                    if (elTop < 0) {
                        popUpEl.scrollTop(nodeScrollTop + elTop);
                    } else if (nodeHeight < elBottom) {
                        popUpEl.scrollTop(nodeScrollTop + (elBottom - nodeHeight));
                    }  
                }
            });  
        }

keyup.

element.bind('keydown', function(evt) {
          //typeahead is open and an "interesting" key was pressed
          if (scope.matches.length === 0 || HOT_KEYS.indexOf(evt.which) === -1) {
            return;
          }

          // if there nothing selected (i.e. focusFirst) and enter or tab is hit, clear the results
          if (scope.activeIdx === -1 && (evt.which === 9 || evt.which === 13)) {
            resetMatches();
            scope.$digest();
            return;
          }

          evt.preventDefault();

          if (evt.which === 40) {
            scope.activeIdx = (scope.activeIdx + 1) % scope.matches.length;
            scope.$digest();
            makeSureVisible();

          } else if (evt.which === 38) {
            scope.activeIdx = (scope.activeIdx > 0 ? scope.activeIdx : scope.matches.length) - 1;
            scope.$digest();
            makeSureVisible();

          } else if (evt.which === 13 || evt.which === 9) {
            scope.$apply(function () {
              scope.select(scope.activeIdx);
            });

          } else if (evt.which === 27) {
            evt.stopPropagation();

            resetMatches();
            scope.$digest();
          }
        }); 

Answer 2

function makeSureVisible() {
    $timeout(function () {
        $el = popUpEl[0].querySelector('.active');
        if ($el) {
            var elTop, elBottom, nodeScrollTop, nodeHeight;
            elTop = $el.offsetTop;
            elBottom = elTop + $el.offsetHeight;

            nodeScrollTop = popUpEl[0].scrollTop;
            nodeHeight = popUpEl[0].offsetHeight - (parseInt(window.getComputedStyle(popUpEl[0], null).getPropertyValue('padding-top')) + parseInt(window.getComputedStyle(popUpEl[0], null).getPropertyValue('padding-bottom')));

            if (elTop < nodeScrollTop) {
                popUpEl[0].scrollTop = elTop;
            } else if (nodeHeight < elBottom) {
                popUpEl[0].scrollTop = nodeScrollTop + elBottom - nodeHeight;
            }
        }
    });
 }

angular bootstrap 0.14.3 27/11/2015.

:

element.bind( "keydown" ), , . ( undefined)

2. "" , . , .

3. javascript.

!

Answer 3

I previously solved this problem using the "shouldFocus" directive, but I had to make more settings to make it work. Perhaps this version will work for you.

.directive('shouldFocus', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.shouldFocus, function (newVal, oldVal) {
                if (newVal && element.prop("class").indexOf("active")) {
                    var par = element.parent("ul");
                    var cellHeight = element.children().innerHeight();
                    var maxHeight = par.height();
                    var startIndex = Math.floor(maxHeight / cellHeight);

                    if (scope.$index > startIndex) {
                        var scroll = (scope.$index - startIndex) * cellHeight;
                        par.scrollTop(scroll);
                    }
                    if (scope.$index === 0) {
                        par.scrollTop(0);
                    }
                }
            });
        }
    }
})

Here is a modified template for those who do not know where to add the directive:

angular.module("template/typeahead/typeahead-popup.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/typeahead/typeahead-popup.html",
    "<ul class=\"dropdown-menu\" ng-show=\"isOpen() && !moveInProgress\" ng-style=\"{top: position().top+'px', left: position().left+'px'}\" style=\"display: block;\" role=\"listbox\" aria-hidden=\"{{!isOpen()}}\">\n" +
    "    <li ng-repeat=\"match in matches track by $index\" should-focus=\"isActive($index)\" ng-class=\"{active: isActive($index) }\" ng-click=\"selectMatch($index)\" role=\"option\" id=\"{{::match.id}}\">\n" +
    "        <div typeahead-match index=\"$index\" match=\"match\" query=\"query\" template-url=\"templateUrl\"></div>\n" +
    "    </li>\n" +
    "</ul>\n" +
    "");
}]);