AngularJs ui-bootstrap Typeahead with scroll

Question

I have created an typeahead on my input using angularjs ui-bootstrap. Code as below:

    <div id="scrollable-dropdown-menu">
      <input type="text" name="uName" ng-model="uName" autocomplete="off" 
      required class="form-control input-medium" placeholder="Enter user 
      name..." typeahead="uName.uName for uName in getUserNames($viewValue)" 
      typeahead-on-select='onSelect($item, $model, $label)'/>
    </div>

I wanted to add a scroll to this so I have wrapped it around a div and added css to achieve scrolling.

The issue is if I start tying something and use my keyboards down arrow on the scroll I cant see the selected item ie the scroll does not move with the arrow key. I have to use my mouse to scrill. I believe its because I am setting a height of the div.

I have created a demo to show the issue as: https://codepen.io/kaka1981/pen/YOvYRY

Any solution for making this work ?

score 0 · Answer 1 · answered Sep 19 '18 at 13:58

I was able to resolve this using below directive:

  .directive('typeahead', function () {
    return {
        restrict: 'A',
        priority: 1000, // Let's ensure AngularUI Typeahead directive gets initialized first!
        link: function (scope, element, attrs) {
            // Bind keyboard events: arrows up(38) / down(40)
            element.bind('keydown', function (evt) {
                if (evt.which === 38 || evt.which === 40) {
                    // Broadcast a possible change of the currently active option:
                    // (Note that we could pass the activeIdx value as event data but AngularUI Typeahead directive
                    //  has its own local scope which makes it hard to retrieve, see:
                    //  https://github.com/angular-ui/bootstrap/blob/7b7039b4d94074987fa405ee1174cfe7f561320e/src/typeahead/typeahead.js#L104)
                    scope.$broadcast('TypeaheadActiveChanged');
                }
            });
        }
    };
}).directive('typeaheadPopup', function () {
    return {
        restrict: 'EA',
        link: function (scope, element, attrs) {
            var unregisterFn = scope.$on('TypeaheadActiveChanged', function (event, data) {
                if(scope.activeIdx !== -1) {
                    // Retrieve active Typeahead option:
                    var option = element.find('#' + attrs.id + '-option-' + scope.activeIdx);
                    if(option.length) {
                        // Make sure option is visible:
                        option[0].scrollIntoView(false);
                    }
                }
            });

            // Ensure listener is unregistered when $destroy event is fired:
            scope.$on('$destroy', unregisterFn);
         }
    };
});

Thanks to the post at: up/down arrow key issue with typeahead control (angular bootstrap UI)

AngularJs ui-bootstrap Typeahead with scroll

1 Answers1