Select element "flickers" on first page load

The use of $timeout (angular-chosen.js, line 72, see below) postpones the initialization of the chosen plugin to a later digest cycle. Because of that, the plain HTML select element will be painted first, leading to an ugly “flickering effect”.

             $timeout(function() {
                chosen = element.chosen(options).data('chosen');
              });

Another approach to make sure the DOM is ready (without flickering) would be the default jQuery way:

              $(document).ready(function () {
                chosen = element.chosen(options).data('chosen');
              });

[boeserwolf]

Hi @leocaseiro, thanks for your quick reply. I’ve updated the tests as well.

[boeserwolf]

@mehmetenes Here’s a gist to a patched version of the directive I use in my project for now: https://gist.github.com/boeserwolf/e3f42a0e476fbc8869e44aa58ccd5e08

As mentioned above, I solved the issue by using angular.element(document).ready() inside the link function. So the chosen plugin will be initialized as soon as the DOM becomes ready, which works like a charm.

@leocaseiro I don’t think that using angular.element(document).ready() inside the link function is a really bad solution. $timeout() ensures element.chosen() get’s called after the DOM was rendered. What we really want, is to apply element.chosen() as soon the DOM is available.

Just digged into the angular source: $timeout() wraps the callback in a try-catch construct, gives you control whether to call $rootScope.apply() and returns a nifty promise. The “flickering issue” remained if you’d use window.setTimeout() instead, because element.chosen() needs to be applied before the DOM is rendered. But I may be totally wrong. 😃