Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

$asyncValidators with $q.when on rejected promise makes ng-invalid/valid flicker #12107

Open
pocesar opened this issue Jun 14, 2015 · 9 comments

Comments

@pocesar
Copy link
Contributor

pocesar commented Jun 14, 2015

http://jsbin.com/comocisuha/edit?html,css,js,output

It seems to have gotten worse in 1.4. Per docs ( https://docs.angularjs.org/api/ng/service/$q#when ) using $q.when to wrap a third party promise, when using the Promise.reject() that returns immediately, makes the input flicker a lot.

It doesn't happen when doing return $q.reject(false)

shot in the dark, I'm using ngAnimate and seems related to #11652 and is on and off (in my case, not in the plunkr)

EDIT2: I can confirm that the problem I'm facing is because of ngAnimate. (My inputs have a transition for box-shadow). Removed the dependency, and it's working as expected, but the plunkr issue happens regardless of ngAnimate

@lgalfaso
Copy link
Contributor

By just looking at the plunker, it is not clear what is the issue you are reporting. Would it be possible for you to describe what is the behavior you are expecting and what is the current behavior?

@pocesar
Copy link
Contributor Author

pocesar commented Jun 14, 2015

The ng-invalid / ng-valid / ng-pending classes that are added every keystroke are making the input flicker, but not when using $q.reject directly

@lgalfaso
Copy link
Contributor

The jsbin is not flickering for me. I try this on Chrome, Firefox and Safari; in all cases on OS X

@pocesar
Copy link
Contributor Author

pocesar commented Jun 14, 2015

changed using box-shadow, it will be noticeable. FWIW, i'm on Windows 7 64bits and Firefox 38

http://jsbin.com/comocisuha/edit?html,css,js,output

If you can't replicate on OSX, I'll record the screen and save as a gif. Seems to happen every 2 or 3 keystrokes (or when keeping the key pressed)

@lgalfaso
Copy link
Contributor

With the new example, I can see the flickering. Now, the external promise library needs to be hooked into the existing digest lookup if you want no flickering.
I understand that the documentation states that you can send any promise library to a when, but that is not without side-effects. You are seeing one.

There is not a lot that can be done without hooking the external promise library promise resolution into the existing digest cycle (and maybe into window.requestAnimationFrame too)

@pocesar
Copy link
Contributor Author

pocesar commented Jun 14, 2015

so it would generate 2 "global" digests (coming from rootScope) for one 3rd party Promise? things can get ugly pretty fast that way I guess

@lgalfaso
Copy link
Contributor

first, this is my personal opinion and my personal opinion only.

If you decide to use a third promise party, then you should be aware that there are some limitations. The fact that $q.when works with other libraries is just to the extend that $q is Promise/A+ compilant.

I would highly recommend that you use $q, but it is your prerogative to use any library that you want. Now, a comment on a documentation stating that $q.when accepts third party promise libraries does not imply that Angular will fix or workaround every third party library implementation so it works within the constraints that $q does.

@pocesar
Copy link
Contributor Author

pocesar commented Jun 14, 2015

I see. I reuse code from a Node.js server for validation, that's based off Bluebird, and can run on both environments, so I can't effectivelly use $q on the server side.

@petebacondarwin
Copy link
Contributor

This is very uncommon scenario. @pocesar if you are able to come up with a workaround or fix then we would be happy to consider it.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants