Material: radio-button: Cannot read property 'nodeName' of null after version 1.1.1

[iberbeu]

I have a site with a radio button.
When it loads the first time everything works perfectly. If I now press F5 I get the following error in the console

TypeError: Cannot read property 'nodeName' of null
    at render (eval at <anonymous> (vendor.bundle.js:1958), <anonymous>:20891:32)
    at eval (eval at <anonymous> (vendor.bundle.js:2092), <anonymous>:8763:13)
    at Scope.$digest (eval at <anonymous> (vendor.bundle.js:2092), <anonymous>:17982:15)
    at processQueue (eval at <anonymous> (vendor.bundle.js:1958), <anonymous>:1724:32)
    at eval (eval at <anonymous> (vendor.bundle.js:2092), <anonymous>:20119:31)
    at completeOutstandingRequest (eval at <anonymous> (vendor.bundle.js:2092), <anonymous>:6274:10)
    at eval (eval at <anonymous> (vendor.bundle.js:2092), <anonymous>:6554:7)

After that I cannot use the radio button any more

Angular version 1.6.3
In angular-material 1.1.1 it doesn't fail. In Versions 1.1.2 and 1.1.3 it fails

It happens in all browsers

I know angular material doesn't support angular 1.6 yet but I think this error has nothing to do with angular 1.6 since angular-material 1.1.1 doesn't support it too but it doesn't fail

EDIT
I think it has something to do with using ng-repeat for filling out the group with buttons

<md-radio-button ng-repeat="current in vm.getAllActiveItems()"
 ng-value="current.id">
<span>{{current.itemAsString}}</span>
</md-radio-button>

If I remove ng-value it doesn't fail. Anyway this isn't a solution because I do need a value

[iberbeu]

Well I found out something that can help:
The first time it loads my radio button gets the ID="radio_6". After pressing F5 the button gets the ID="radio_5"., which seems to be out of range or something like that and then the radio button stops to work
I cannot understand why this is behaving this way

[josepfdc]

This code way works for me

#<md-radio-button ng-repeat="current in vm.getAllActiveItems()"
 value="{{current.id}}">
<span>{{current.itemAsString}}</span>
</md-radio-button>

[HansWouters]

I had the same issue.
The problem was the options in my radio-group could change, so on certain updates I retrieved the options again from the server (when doing update A on the page, the radio-buttons are on the page, but when doing update B they disappear, on A they appear again etc.).
I think the problem was that under the hood an option is selected with a value that is no longer existing, since the server gave me all these new objects (even if they might be the same, the hash will be different).
I solved my issue by checking the new list with the old list, and only adding new items with an id that was not present in the old list yet.

I hope the story makes sense :-D

[Ardeshir81]

Thanks @HansWouters !
strangely a track by $index solved my problem (or maybe did not solve, it just helped burying the console error logs), but by the way my md-radio-button and md-radio-group are working and correct value is being passed! strange!

By the way, I tried some to find the issue, I didn't, but I found out this line was causing exception in my case:

function render() {
      var checked = rgCtrl.getViewValue() == attr.value;

      if (checked === lastChecked) return;

      if (element[0].parentNode.nodeName.toLowerCase() !== 'md-radio-group') {
        // If the radioButton is inside a div, then add class so highlighting will work
        element.parent().toggleClass(CHECKED_CSS, checked);
      }

in if (element[0].parentNode.nodeName.toLowerCase() !== 'md-radio-group') { the parentNode is null!

[Splaktar]

It looks like we could add a check that element[0].parentNode exists here, but we really need a CodePen reproduction of this issue to debug it and provide a fix.

[Splaktar]

Closing as no CodePen demo has been provided and the OP did not use the issue template. If you are still seeing this issue, please open a new issue that uses the issue template and provides a CodePen reproduction.

[amjad-ainia]

Hi , i hope this will help you ,,

i have add a condition in (angular-material.min.js ) file :
you will fine the code in this way : "md-radio-group"!==n[0].parentNode.nodeName.toLowerCase() .

i replace it in this code :
(n[0].parentNode !== null)?"md-radio-group"!==n[0].parentNode.nodeName.toLowerCase():false