additional datepicker tpl flash to the right when used with form

[trickpattyFH20]

http://plnkr.co/edit/4FxFC1haWWc9rIBwXpxx?p=preview

I noticed some odd behavior when a datepicker is wrapped inside of <form> tags.

As the issue occurs in the web app I am working on, the first selection of a date causes an additional datepicker tpl to flash in very quickly on the right side and then disappear. If you continue to select dates after this, the additional tpl + flash does not happen.

In the above plunkr, the same thing happens, along with another interesting thing... if you select a date for the datepicker wrapped in the <form> tags, it flashes, and if you then continue to select dates, alternating between the one inside the <form> tags, and the one not in <form> tags, the issue continues to happen... very strange.

This is based on the latest release of UIB, using the example datepicker html, with the only change being that I added <form> tags surrounding one of the datepickers.

If I am missing something here, LMK, any help would be much appreciated, if not, I think I may have found a datepicker bug.

[icfantv]

This may very well be a positioning bug and if so, it may be fixed by #5444.

[trickpattyFH20]

@icfantv I just tried throwing an inline datepicker wrapped in form tags into the plunker linked in #5444 and I was not able to reproduce the issue in this plunker. I was curious and replaced the UIB snapshot in this plunker with the current UIB release of 1.1.2 and I am still unable to reproduce the issue

I haven't figured out what it is yet, but something is either incorrect with the options / markup of the plunker that I made here, or it is a different bug not related to the auto positioning feature.

I will do more research and see what I can find.

If you include ngAnimate as a dependency of the plunker created for #5444 the issue can be reproduced using the snapshot created there including the new auto positioning feature.

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

[trickpattyFH20]

@icfantv I could try to dig into the source for this one too. btw thank y'all for merging my last pr.
do you have any tips/idea what the exact cause of this bug might be?

[trickpattyFH20]

notes on the bug:
tested on source versions: angular 1.4.9 + angular-animate 1.4.9 + UI-Bootstrap 1.1.2 + Bootstrap 3.3.6

1. on iOS 9 safari it occurs with ANY inline datepicker with ngAnimate included as a dependency
2. it does not occur in Chrome 48.0.2564.103 if you use an inline datepicker outside of <form> tags

temporary workaround:
.ng-enter-prepare{ display: none!important; }

[wesleycho]

I summon thee @RobJacobs , master of all positioning issues :)

[RobJacobs]

I wish it was as simple as positioning, but it seems to be something with the $animation. In this plunk the second month doesn't show up until it gets in this function - line 5434 in the $$AnimateAsyncRunFactoryProvider:

  $$rAF(function() {
    for (var i = 0; i < waitQueue.length; i++) {
      waitQueue[i]();
    }
    waitQueue = [];
  });

Then all the days get doubled for each week displayed:

I don't think this is isolated to being in a form element as I see this behavior in Edge without it.

[wesleycho]

Not sure if we can fix this - perhaps an issue is worth filing in Angular's repo?

[tvsbrent]

Just to add a little more information to this issue. I encountered it using 0.14.3 when I added some custom $validators to the ngModelController of the datepicker. I was seeing it the first time the classes involved in animating the element to the valid or invalid state were added a second calendar would show up temporarily.

Since I didn't want to show any sort of invalid state on the actual picker, I resolved it in my case by bringing in the $animate service and calling $animate.enabled( [pickerElement], false). BTW, I'm using Angular 1.4.2.

[ksufinski]

I resolve this issue by disabling display more then 7 cell(day) in a row :
table tbody tr td:nth-child(n+9){ display:none; }

Where table is inside the datepicker and td cell is day.
And 9 cells mean 7 days of week because datepicker takes two cells for some reason

[bennettatoms]

@ksufinski's CSS patch worked for me, except that I needed nth-child(n+8), presumably because my dropdown isn't showing the week number, which would occupy the additional table cell.

[bhamde]

a workaround is to add something like this:
.calendar-disable-animations td {
&.ng-enter,
&.ng-leave,
&.ng-animate {
-webkit-transition: none !important;
transition: none !important;
}
}

but it would be good if we can pass in a class name that can be added to the calendar elements themselves, this way we can disable it through $animateProvider:

myApp.config(function($animateProvider) {
$animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
})