<input> tags within radio buttons do not change checked attribute when switching between choices

When changing radio buttons in the UI, the checked attribute on the <input> tag does not get updated. Upon inspection of the DOM, you can see that the checked attribute remains on the first child regardless if it’s checked or not.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When selecting an option on a material-ui radio group, the checked attribute that exists within the <input> tags does not update accordingly. It will remain on the top level child even if it’s no longer selected.

Expected Behavior 🤔

The checked attribute on the <input> should appear on newly selected items and be removed from the one no longer selected. Or the checked attribute should be showing a boolean value to determine if the item is selected or not.

Steps to Reproduce 🕹

Steps: Navigate to: https://material-ui.com/components/radio-buttons/

1. Go to the first radio group under the section RadioGroup
2. Inspect element on the option Female (if this is the first radio group collection)
3. Locate the checked attribute within the <input> element in the DOM selector
4. Within the UI, click on any other selection within that radio group
5. Within the inspector, the checked attribute on the previous selection will remain
6. Inspect the second element which was the new selection
7. Within the inspector, the second element will not contain the checked attribute

Context 🔦

Our automation on our team requires some way to tell within the DOM that an item is selected. Our current workaround is to attach an aria-selected to the element. However, it would be nice if the checked attribute would either update with a boolean, or remove itself from the unselected element and attach itself to the newly selected element.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.0
React	^16.9.0
Browser	Chrome
TypeScript
etc.

[xylish7]

@dwjohnston My current issue is related to using RadioGroup. I’ve created this codesandbox to actually test the issue I’m having: https://codesandbox.io/s/gifted-sutherland-4mw0w6.

So in the codesandbox I tried to implement a checked={isChecked} thing as you mentioned, but doing so on the Radio components will still not work.

At first, since Location 2 is selected by default, if you inspect Location 2 element , indeed it will have an attribute of checked="":

Now, because of line 38 from the codesandbox (checked={location === selectedLocation}), I expect when clicking, for example, on Location 3, that the checked attribute should be present on Location 3 input and not Location 2. However it is still present on the initial selected radio button.

Is this the desired result ? And if it is, what should be the workaround ? Thank you and sorry for the late response!

[dwjohnston]

@xylish7 Looks like you’re right, the checked = technique won’t work. This appears to be standard behaviour in React, not something to do with MUI itself (here’s a plain example: https://codesandbox.io/s/fast-worker-m4kxr1?file=/src/App.js)

It would be nice to have a authorative reference for this, but to hazard an explanation, I imagine it’s because ‘checked’ is one of those properties that ‘only apply when the element first mounts’ that they intentionally defined this this behaviour in React. They probably do the same for properties like defaultValue too.

My apologies for setting you down the wrong path.