Firefox hover doesn't respect highlighted option in a select ng-options after digest

[Jose M]

I'm seeing this weird issue with Firefox when hovering over a select option in a select input with options built by ng-options.

Whenever you hover over any option that is not the currently selected option, the browser will reset the currently highlighted option after a $scope.$apply occurs.  In our application we currently do a poll for some data and we are often calling $scope.$apply every second or less when we get new data.

Below is a jsfiddle which demonstrates the behavior.  I have set it up to do a fake poll call with a $scope.$apply every 250 milliseconds using the $timeout service.

http://jsfiddle.net/Xn7PA/12/

Click on the dropdown and hover the mouse over any of the options that is not the default empty one.

I'm using Firefox version 19.0.2 (on Mac OSX) and in our application we are using angularjs version 1.1.3 (although in the jsfiddle it's setup with AngularJS version 1.1.1 and the issue still manifests itself).

It works fine in Chrome (stable and Canary), Safari, and Opera.

In IE9 I also see the issue after I select any option (the first one is not selected by default).

[Jose M]

I actually see the same issue on both Chrome and Firefox in Windows.

[Jose M]

Does anybody have any ideas how to tackle this problem?

[Clint Checketts]

I don't have a solution. But here is an observation: http://jsfiddle.net/Xn7PA/13/

The error goes away when you remove the 'Select a value' option.

 <option value="">Select Type...</option>

Or if you stop using the ng-options attribute:

    <select ng-model="selected_type" >

        <option value="">Select Type...</option>

        <option ng-repeat="t in types" value="{{t}}">{{t}}</option>

    </select>

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Edvinas Stunžėnas]

I did some digging in angular sources, seems that problem occurs due to wrong 

checking of existing options selected state. Here is my patch for angular v1.0.6 

that worked for me. Hope it works for you too

{{{

Index: angular/angular.js

===================================================================

--- angular.orig/angular.js     2013-05-21 17:14:23.454552989 +0300

+++ angular/angular.js  2013-05-21 17:16:38.610550189 +0300

@@ -14642,7 +14642,7 @@

                 if (existingOption.id !== option.id) {

                   lastElement.val(existingOption.id = option.id);

                 }

-                if (existingOption.element.selected !== option.selected) {

+                if (existingOption.selected !== option.selected) {

                   lastElement.prop('selected', (existingOption.selected = option.selected));

                 }

               } else {

[Ben Nadel]

@Edvinas,

You are a beautiful beautiful person! That just saved my day! I went in a patched my local, minified src code :)

Thanks!!
Ben Nadel

[Michael Monette]

@Edvinas,

Thanks for the guidance!  I'm working from version 1.0.8, and your patch pointed me to just the right place.

[him...@matthew.geek.nz]

Hey @Edvinas, it looks like this patch solves an issue we had with a timer (calling digest) in v1.08.

However, this issue still seems to be in v1.2.0 without patching.

I had a dig around, and nerd-stalked you on github (edzius right?), and it doesn't look like you submitted this patch to core, nor does it look like it's on the radar in the issue tracker.

Have you submitted this patch any place other than this mailing list?

Are there side effects of this patch that may make you hesitate to submit it as a pull request?

Would you mind if I took this and tried pushing this upstream on your behalf?

Cheers

~Matthew.

[Edvinas Stunžėnas]

Hello @Matthew.

As i remember this patch fixes only `ng-options` behavior on digest. It looked like simple implementation bug in misuse of internal structures.

Anyway yes it is edzius. :) I haven't submited this patch elswhere also no side effects noticed. Soon after i post the patch here angular v1.2.0 released and it seemed to fix this issue for me so the patch was left aside. However if you still see the same issue with 1.2 we might have been be hearing different parts of same echo.

Yes, please, push it upstream if it really solves your problem ;)

Cheers

Edvinas

[Brian Vaughn]

FWIW I encountered this issue as well and submitted it here: https://github.com/angular/angular.js/issues/6769

Initial attempt at patching it as described above seemed to work in the browser but caused the unit tests to fail.