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

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

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

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>

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

@HansWouters

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!

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.

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.

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

fix(radio-button): Cannot read property 'nodeName' of null

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

iberbeu commented on Mar 30, 2017

josepfdc commented on May 25, 2017

HansWouters commented on Jun 14, 2017

aghArdeshir commented on Jul 14, 2018

Splaktar commented on Jul 18, 2018

Splaktar commented on Aug 14, 2018

amjad-ainia commented on Sep 11, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions