Bug: Typeahead broken in latest angular #2293

noducks · 2014-06-03T22:01:49Z

Seems Typeahead isn't working correctly since v1.3.0-build.2783.

Keyboard jumps through the items, but it doesn't highlight them, so you can't see which one is selected.
Clicking with the mouse on the typeahead list doesn't update the input.

These bugs show up in Chrome and Safari, haven't tried any other browsers.

http://plnkr.co/edit/poA6Pu?p=preview

pkozlowski-opensource · 2014-06-04T06:31:51Z

Indeed, this sounds like a regression on the AngularJS side.... Not sure what could have caused this atm, though.

caitp · 2014-06-04T11:08:19Z

I'm not seeing the popup's methods being called

myitcv · 2014-06-10T13:27:33Z

Just ran into this too

xmlking · 2014-06-14T23:08:36Z

+1
it was working fine till 1.3.0-beta.5.

myitcv · 2014-06-17T10:26:46Z

Looks like this actually broke in v1.3.0-beta.11. It appears to be working in v1.3.0-beta.10

pkozlowski-opensource · 2014-06-17T17:35:04Z

@caitp just looking into this, but I'm not 100% sure which exact commit broke this :-/

caitp · 2014-06-18T01:42:15Z

It's likely related to Pete/Vojta's transclusion fixes, @pkozlowski-opensource --- but I think we don't want to revert those changes

myitcv · 2014-06-18T05:54:53Z

@caitp - presumably those fixes relate AngularJS 5489 amongst others?

On the basis any changes like this to transclusion are likely to have wider reaching impact, is there a document somewhere that captures the scope and impact of said changes? I suspect typeahead won't be the only place affected.

FirebaseExtended/angularfire#320 angular-ui/bootstrap#2293

davisford · 2014-07-10T02:26:11Z

Any simple workaround other than dropping back to an older version of angular?

myitcv · 2014-07-10T16:43:45Z

AngularJS #8072 appears to confirm the bug is within angular-ui. However I can't make the solution proposed by @wazzeb work against AngularJS master.

joshbowdoin · 2014-07-11T00:00:45Z

setting typeahead-template-url also appears to be broken in Angular 1.3.0-beta14.

nivthefox · 2014-08-01T08:45:32Z

I've submitted #2535 as a fix for this. I've confirmed that this does fix the issue with 1.3.0-beta.17. Simple change, but it works just fine.

noducks · 2014-08-01T16:21:50Z

@kkragenbrink Just tried that out. Works great on Chrome, Safari, IOS & Android.

Who would have thought it'd be that simple! Thanks.

futurechan · 2014-08-14T20:23:46Z

+1

Fixes angular-ui#2474 Fixes angular-ui#2541 Fixes angular-ui#2293 Closes angular-ui#2535 Closes angular-ui#2557

9442552055 · 2015-03-04T09:32:58Z

Use decorator to extend third party directives, so that if they are upgrading you can upgrade your lib without code change, just you can remove your decorator.
<!DOCTYPE html>
<html>

<head>
<title>Adding/modifying predefined Services/Direcives</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script>
'''javascript
window.onload = function() { //After loading scripts

    var decoApp = angular.module('decoApp', ['ui.bootstrap']);
    decoApp.run(['$rootScope',
        function(r) {
            r.states = [];
            for (var a = 1000; a > 0; a--) {
                r.states.push({
                    name: "state" + a,
                    id: a
                });
            }
        }
    ]);
    decoApp.config(function($provide) {
        $provide.decorator('typeaheadDirective', function($delegate) {
            //console.log($delegate);
            var directive = $delegate[0];
            var link = directive.link;
            var keyCodes = {
                37: 'left',
                39: 'right',
                38: 'up',
                40: 'down'
            };
            directive.compile = function() {
                console.log('compiling');
                return function(scope, element, attrs) {
                    console.log(element, attrs);

                    link.apply(this, arguments);
                    setTimeout(function() { //time delay to render the directive by angular
                        var dropdownId = element[0].attributes.getNamedItem('aria-owns').value;
                        var dropdownElement = angular.element(document.getElementById(dropdownId));
                        dropdownElement.css('height', '200px');
                        dropdownElement.css('overflow-y', 'scroll');
                        //bind event
                        element.on('keydown', function(e) {
                            if (!!keyCodes[event.keyCode]) {
                                if (e.target.attributes.getNamedItem('aria-owns').value === dropdownId) {
                                    var activeItemId = e.target.attributes.getNamedItem('aria-activedescendant').value;
                                    var top = document.getElementById(activeItemId).offsetTop;
                                    dropdownElement[0].scrollTop = top;
                                }
                            }
                        });
                        //unbind event
                        var destroyEvent = scope.$on('$destroy', function() {
                            console.log('$destroy');
                            if (typeof destroyEvent === 'function') {
                                destroyEvent();
                            }
                            element.off('keydown');
                        });
                    }, 2000);
                };
            };
            return $delegate;
        });
    });
    angular.bootstrap(document, ['decoApp']);
}

'''
</script>
</head>

<body>
<div class="form-group">
<label>Type a number</label>
<input class="form-control" type="text" ng-model="selected" typeahead="state.name for state in $root.states | filter:$viewValue | limitTo:28" class="form-control">
</div>
</body>
</html>

jonathanmclarke-zz · 2015-09-05T11:08:46Z

I'm still having the same type-ahead problems with 1.4.5. Has this problem now been confirmed solved?

ashigl · 2016-01-15T23:29:19Z

I am also facing the same problem. Using Bootstrap 0.11.0 and angular js 1.4.8.

icfantv · 2016-01-15T23:58:06Z

@ashigl, please do not comment on closed issues. doing so is a really good way for them to be missed or ignored.

cscuser · 2017-07-27T10:27:16Z

I am also facing the same problem. Using Bootstrap v3.3.6 and angular js v1.4.7

pkozlowski-opensource closed this as completed Jun 17, 2014

pkozlowski-opensource reopened this Jun 17, 2014

pkozlowski-opensource mentioned this issue Jun 17, 2014

Angular 1.3.0 d71df9f+ and Angular bootstrap 0.11 typeahead angular/angular.js#7860

Closed

caitp mentioned this issue Jun 18, 2014

typeahead broken in Angular 1.3 beta11+ #2354

Closed

albertosantini added a commit to albertosantini/piadinamia that referenced this issue Jun 28, 2014

Revert 1.3.0-beta.10 to fix two regressions.

2592438

FirebaseExtended/angularfire#320 angular-ui/bootstrap#2293

myitcv mentioned this issue Jul 10, 2014

Add Travis build against 1.3.0-beta.N #2440

Closed

EricTheoBrunet mentioned this issue Jul 15, 2014

Typeahead issues since 0.11.0 #2469

Closed

23tux mentioned this issue Jul 24, 2014

Typeahead broken with angular 1.3 #2474

Closed

zackarychapple mentioned this issue Aug 7, 2014

fix(typeahead): corrections for bugs #2293, #2535 #2557

Closed

pkozlowski-opensource closed this as completed in a0be450 Aug 15, 2014

OronNadiv pushed a commit to lanetix/bootstrap that referenced this issue Nov 18, 2014

fix(typeahead): replace ng-if with ng-show in matches popup

e04a36f

Fixes angular-ui#2474 Fixes angular-ui#2541 Fixes angular-ui#2293 Closes angular-ui#2535 Closes angular-ui#2557

karianna added the component: typeahead label Mar 4, 2015

ashigl mentioned this issue Jan 15, 2016

Typeahead selection by mouse click doesn't work #5272

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug: Typeahead broken in latest angular #2293

Bug: Typeahead broken in latest angular #2293

noducks commented Jun 3, 2014

pkozlowski-opensource commented Jun 4, 2014

caitp commented Jun 4, 2014

myitcv commented Jun 10, 2014

xmlking commented Jun 14, 2014

myitcv commented Jun 17, 2014

pkozlowski-opensource commented Jun 17, 2014

caitp commented Jun 18, 2014

myitcv commented Jun 18, 2014

davisford commented Jul 10, 2014

myitcv commented Jul 10, 2014

joshbowdoin commented Jul 11, 2014

nivthefox commented Aug 1, 2014

noducks commented Aug 1, 2014

futurechan commented Aug 14, 2014

9442552055 commented Mar 4, 2015

jonathanmclarke-zz commented Sep 5, 2015

ashigl commented Jan 15, 2016

icfantv commented Jan 15, 2016

cscuser commented Jul 27, 2017

Bug: Typeahead broken in latest angular #2293

Bug: Typeahead broken in latest angular #2293

Comments

noducks commented Jun 3, 2014

pkozlowski-opensource commented Jun 4, 2014

caitp commented Jun 4, 2014

myitcv commented Jun 10, 2014

xmlking commented Jun 14, 2014

myitcv commented Jun 17, 2014

pkozlowski-opensource commented Jun 17, 2014

caitp commented Jun 18, 2014

myitcv commented Jun 18, 2014

davisford commented Jul 10, 2014

myitcv commented Jul 10, 2014

joshbowdoin commented Jul 11, 2014

nivthefox commented Aug 1, 2014

noducks commented Aug 1, 2014

futurechan commented Aug 14, 2014

9442552055 commented Mar 4, 2015

jonathanmclarke-zz commented Sep 5, 2015

ashigl commented Jan 15, 2016

icfantv commented Jan 15, 2016

cscuser commented Jul 27, 2017