Invalid Calling Object in nodesToArray

[mdelgadov]

In IE 11 when using md-select, the directive works properly when using the mouse... It opens, moves, etc.

But when using the keyboard, specifically the arrow down key, the following exception happens:

The function:

// Annoying method to copy nodes to an array, thanks to IE
function nodesToArray(nodes) {
var results = [];
for (var i = 0; i < nodes.length; ++i) {
results.push(nodes.item(i));
}
return results;
}
})();
In the instruction nodes.length throws the unhandled error:
Unhandled exception at line 7882, column 19 in http://localhost:14493/scripts/angular-material.js

0x8000ffff - JavaScript runtime error: Invalid calling object

Thanks in advance...

[ThomasBurleson]

Could not reproduce.

[Londovir]

I am having this problem with IE11 (11.0.9600.17801 / Update versions 11.0.19) using my own md-select project, along with the material design demo page as well. It's easy to reproduce on the demo website:

1. Go to https://material.angularjs.org/latest
2. Click on the "Demos" menu item, then click on "Select".
3. Go to the "Basic Usage" demo panel, click on the State select item.
4. Press the down arrow on the keyboard.

At this point, if you do not have the console window (F12 tools) open, you get an error popup describing the error as "Unexpected call to method or property access". With the F12 tools panel open, it errors as "Invalid calling object" just as the original poster noted.

If necessary, I can make a codepen and/or record a brief video showing this, but it happens in stock IE11. It is also happening in my Win10 Insider Build 10074 Spartan/Edge instance as well, although I have not updated my Insider build lately and the issue may not happen in newer instances.

It appears from my quick research that the nodes collection of md-option entries is somehow being invalidated after the variable is first set with a querySelectorAll call, and when later a keyboard down event occurs, and the code attempts to reference nodes.length, it is an invalid collection and IE throws the error. The irony, of course, is that the single line comment above that function indicates it was written 'thanks to IE', and yet in IE11 and Edge/Spartan, it is broken and not working correctly...

I have had to remove all instances of md-select from my ongoing projects because we need IE11 support, so I'm hoping that this bug can be reproduced and tracked and this issue be reopened accordingly. If I can help, please do not hesitate to ask for more info!

[nassoman]

I have also this problem with IE11 (11.0.10011.0). It is easy reproduce like Londovir commented.
Just down arrow and you get:
Line: 7
Error: Invalid calling object

[ThomasBurleson]

@Londovir, @nassoman - can you confirm that the latest changes in master resolve this issue (for your own code usages)?

[nassoman]

Demo seems to work fine now also with IE. I will try tomorrow with my own code usage.
Thank you.

[Londovir]

@ThomasBurleson - I continue to get this error using v0.10.0-master-c183e9b. I still see it on the demo site as well (https://material.angularjs.org/HEAD/#/demo/material.components.select), actually, using IE 11.0.9600.17842. Although it's not fun to try and find the code in the minified JS file, I did verify that the demo site was not being cached on my machine and that the line nodes = nodes || [ ]; was in the source.

Actually, at least when debugging with Visual Studio, the first time I enter the md-select under IE11, say from tabbing into the control, and hit a down arrow, the list expands as expected [no error]. If I immediately press down arrow again to move down in the list, I get an error on the nodes.length line referenced above that's called "Unexpected call to method or property access". If I attempt to down arrow again, the error changes to the previously mentioned "Invalid calling object" error from that point onwards.

I think the problem is that, for IE11 at least, the nodes variable exists, so it doesn't appear as though the added line is really doing anything; it's just that IE believes the contents of the collection are no longer valid so it will not allow the length.

For what it's worth, I've found a potential solution but it is not really performant right now. Modify Select - Line 823 to read as:

    var optionsArray = $mdUtil.nodesToArray(opts.selectEl[0].getElementsByTagName('md-option'));

This is similar to how something else is handled in Line 486

The problem, of course, is that every single key up/down calls into that, causing the selection to be pulled for every keypress. However, in IE11 for me, doing that and not even using the code line you committed as a fix works fine, so it tells me that IE11 is somehow corrupting the stored contents of optionNodes as set up in Line 726 (where I borrowed that fix above from). I'm not sure yet what code is modifying the DOM after Line 726 runs which makes IE11 think the collection is no longer valid, but it definitely seems like this is the problem.

[ThomasBurleson]

@Londovir - try it now plz with the master and its changes 05119a7

I do not have the ability to personally test IE, so your feedback helps validate these changes for that browser.

[Londovir]

@ThomasBurleson - Pleased to report this fixed it. I have no issue any longer in my app, nor does the demo site exhibit the problem either. Thanks!

[nassoman]

IE and arrow key problem is working also with my code usage (after some visual studio refresh/load problems), but md-select seems to have a lot of other issues:
*layout problem: style changes requires changes to html and (temporary fixes: div flex etc.)
*ng-change does not work with md-select