Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

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

Closed
iberbeu opened this issue Mar 30, 2017 · 7 comments · Fixed by #12013
Closed

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

iberbeu opened this issue Mar 30, 2017 · 7 comments · Fixed by #12013
Assignees
Labels
has: Pull Request A PR has been created to address this issue needs: demo A CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue P4: minor Minor issues. May not be fixed without community contributions. severity: regression This issue is related to a regression type: bug
Milestone

Comments

@iberbeu
Copy link

iberbeu commented Mar 30, 2017

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
Copy link
Author

iberbeu commented Mar 30, 2017

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
Copy link

josepfdc commented May 25, 2017

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
Copy link

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

@aghArdeshir
Copy link
Contributor

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 Splaktar changed the title error (Cannot read property 'nodeName' of null) with radio button after version 1.1.1 radio-button: Cannot read property 'nodeName' of null after version 1.1.1 Jul 18, 2018
@Splaktar Splaktar added the severity: regression This issue is related to a regression label Jul 18, 2018
@Splaktar Splaktar self-assigned this Jul 18, 2018
@Splaktar Splaktar added the needs: demo A CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue label Jul 18, 2018
@Splaktar
Copy link
Member

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
Copy link
Member

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
Copy link

amjad-ainia commented Sep 11, 2020

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

@Splaktar Splaktar reopened this Sep 13, 2020
@Splaktar Splaktar added this to the 1.2.1 milestone Sep 13, 2020
@Splaktar Splaktar self-assigned this Sep 13, 2020
@Splaktar Splaktar added has: Pull Request A PR has been created to address this issue P4: minor Minor issues. May not be fixed without community contributions. type: bug severity: regression This issue is related to a regression labels Sep 13, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has: Pull Request A PR has been created to address this issue needs: demo A CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue P4: minor Minor issues. May not be fixed without community contributions. severity: regression This issue is related to a regression type: bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants