Angular Bootstrap Typeahead - Append to Body - Stuck

Question

The typeahead display gets stuck to the body when using append to body in combination with routing.

typeahead-append-to-body="true"

I used the Angular seed project and one of the simple Typeahead examples and replicated the problem: http://plnkr.co/WSNIRKLqOCLqO87jp3an

• Load page
• Select 'view2'
• Select 'view1'
• Type alpha character 'a' into the input
• Observe the typeahead display attached to the body
• Select view2
• Observe display is still attached to the body

Problem happens in all the browsers I tried.

I see the click bindings to the document fire but the dismissClickHandler is not called if the page is has been routed to before. Meaning it works fine the first time, but when you go back to a page that you have been to before it never firs the dismissClickHandler.

https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js

// Keep reference to click handler to unbind it.
  var dismissClickHandler = function (evt) {
    if (element[0] !== evt.target) {
      resetMatches();
      scope.$digest();
    }
  };

  $document.bind('click', dismissClickHandler);

  originalScope.$on('$destroy', function(){
    $document.unbind('click', dismissClickHandler);
  });

  var $popup = $compile(popUpEl)(scope);
  if ( appendToBody ) {
    $document.find('body').append($popup);
  } else {
    element.after($popup);
  }

Any thoughts?

Answer 1

Please note that this is fixed using the latest versions of Angular (1.4.7) and Angular UI Bootstrap (0.14.3) - at the time of this writing. As such, I've closed https://github.com/angular-ui/bootstrap/issues/2551.

Answer 2

I believe this is a bug of the angular-bootstrap to not call $popup.remove() when its scope has been destroyed.

The reason it seems to work fine at the first time is because when you navigate to view 2, the template has't been ready in a cache yet, so it take sometime to load, and that allow the dismissClickHandler() to get executed and hide a popup.

But just hidding the popup is not enough. It should be removed from the DOM.

In your plunker, if you navigate back and forth between views a few times, then inspect the DOM, you will see a lot of dangling ui elements are still there but hidden in the document.body.