uib-tooltip 'outsideClick' misbehaves with uib-datepicker-popup

[evankleist]

Bug description:

We have a uib-tooltip configured with 'outsideClick' so that it closes when anything outside the tooltip is clicked. Inside of the tooltip, we have a uib-datepicker-popup so that the user can select a date for an input inside of the tooltip. When the user opens the tooltip, and then opens the datepicker, the first time they select a date, everything behaves as expected. However, the 2nd time they pick a date, the tooltip unexpectedly closes.

Link to minimally-working plunker that reproduces the issue:

https://plnkr.co/edit/H6M7C7MNPoPlWO4aNe4f

Steps to reproduce the issue:

1. Open the plunker
2. Click the button to open the tooltip
3. Click the input inside of the tooltip to open the datepicker
4. Select any date. Notice that this closes the datepicker but does not close the tooltip. This is expected because datepicker is a child node of the tooltip.
5. Click the input inside of the tooltip to open the datepicker again
6. Click on a different date then you initially picked

Result: Datepicker closes and tooltip closes Expected: Datepicker to close but tooltip to remain open, just like in step 4. From my analysis so far, this is because by the time the outsideClick callback runs, the datepicker has already been removed from the dom so it is not considered a child of the tooltip, therefore it closes. I am not sure why the click in step 4 behaves differently than the click in step 6.

Version of Angular, UIBS, and Bootstrap

Angular: 1.6.1

UIBS: 2.5.0

Bootstrap: 3.3.7

[evankleist]

I have a workaround which could maybe become part of the solution. I overrode the popup template to the following

<ul role="presentation" class="uib-datepicker-popup dropdown-menu uib-position-measure" dropdown-nested ng-show="isOpen" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
  <li ng-transclude></li>
  <li ng-if="showButtonBar" class="uib-button-bar">
    <span class="btn-group pull-left">
      <button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
      <button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
    </span>
    <button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
  </li>
</ul>

The only difference from the default template is that I use ng-show="isOpen" instead of ng-if="isOpen"

You can then specify the path to this custom template with datepicker-popup-template-url