blackbaud / skyux1

DEPRECATED This site contains the codebase for the AngularJS (1.x) implementation of the SKY UX framework. We no longer support this version of SKY UX, and we recommend that you use the latest version instead. https://developer.blackbaud.com/skyux/
MIT License
51 stars 68 forks source link

bb-date-range-picker bb-date-range-picker-valid directive not picking up validation change from a watch #1083

Open Blackbaud-KevinHutson opened 6 years ago

Blackbaud-KevinHutson commented 6 years ago

Expected behavior

for bb-date-range-picker, with a from and to date, I expect when I go from an invalid state to a valid state, that this value will be reflected in my controller.

Actual behavior

bb-date-range-picker's bb-date-range-picker-valid directive does not fire when going from invalid to valid.

Steps to reproduce

Plunker

Here is a Plunker that demonstrates the issue. We have 2 different components in Luminate NextGen that demonstrates this issue. Notice the watch and the console statement. It will not reflect the correct state of isValid, presumably because the watch fires before that change happens.

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

Blackbaud-KevinHutson commented 6 years ago

Some additional clarification since it may not be obvious from the description.

Load the page. IMPORTANT: open the developer console. There’s a log statement from index.js that fires when the watch happens. Put in a valid from date. Put in a bogus to date (say ‘foo’) Notice isValid = false from the console.log. Now fix the toDate to a valid date. The second you fix it, isValid will be true in UI but FALSE in the watch scope.

Blackbaud-BobbyEarl commented 6 years ago

I don't know if there's any change we could implement to not make this happen. We might be able to to set isValid in our other watchers, but I'm not sure the vm.dateRangeForm.$valid has been updated yet.

Alternatively, depending on what you're trying to do, I can think of a couple workarounds. 1) . Use a $timeout which will let that next digest cycle pass. 2) . Watch the isValid property instead of watching myDate. Here's a plunkr using both of those techniques. http://plnkr.co/edit/UM4Dwpo5gr37vumPqM9V?p=preview

Let me know what your thoughts.