Datepicker doesn't work inside of a dropdown

[danbrouwer]

Dropdowns do not function properly when they contain datepickers. I created a plunker to demonstrate this issue:
http://plnkr.co/edit/4oKkCBE1guidfamYYp7S?p=preview

Open the button dropdown
Open the datepicker dropdown and click a date
Close the button dropdown
Try to open the button dropdown again
Observe that the dropdown does not open properly

Debugging has led me to believe that the datepicker popup is setting the dropdownMenuTemplateUrl property on the dropdownController for the outer dropdown.

This appears to be a regression in 0.13.x, as changing the ui-bootstrap version back to 0.12.1 fixes this issue.

[wesleycho]

This seems like a very bad UX - any particular reason for putting a datepicker popup inside a dropdown?

This does appear to be a bug, but this is also a UX decision that should be heavily frowned upon. If you are willing to file a PR with a good fix for this, I would be happy to review & get it in, but otherwise this is ranks very low on the list of things to address.

[danbrouwer]

We're using the dropdown to contain a collection of filters for a table. It's nice in that the filters only take up screen real estate when the user is interacting with them.

[sullivanpt]

FYI: setting datepicker-append-to-body="true" will bypass this issue; however, the append to body option does not handle Z-order well if your date picker is in a modal.

[chrisirhc]

Hmm.. wasn't the resolution from before to stop supporting using classes for directives? That's a breaking change. Also, this will no longer be an issue once we use prefixes.
However, I think we should still stop supporting class-based directives. dropdownMenu is the only directive with restrict: 'AC'.

[sullivanpt]

I don't have any opinion on class based directives. The issue here is that the drop down controller used for menu dropdowns is the same as the drop down controller used for the date picker; so when a date picker is nested inside a drop down angular picks the wrong drop controller to attach to the date picker. It is really a problem with the angular 'require' statement, but I could not think of any easy to fix it other than either the hack I put in my pull request, or refactoring the date picker to use its own drop down controller 'name'. Open to suggestions, but do need a solution. We use very large do drop downs for setting search filters, including dates.

[wesleycho]

Interesting - I'll schedule this for the upcoming 0.14.0 release and we'll have a fix in. That is great investigative work there @sullivanpt, thanks for looking into this.

[danbrouwer]

I'm not sure this is fixed. Changing the angular-bootstrap version to 0.14.0, 0.14.1, or 0.14.2 in that plunkr still results in the same behavior. Am I missing something?

[icfantv]

@djasper99, please do not comment on old and closed issues. Doing so is a good way for us to miss stuff.

If you think you've found a bug, please follow these instructions.

Unfortunately, if you think you have found a bug and do not follow the above instructions within a reasonable amount of time, we will close the issue due to lack of activity.