Skip to content

AXARadio with React - the component behaves as "uncontrolled" #793

@marek99999

Description

@marek99999

Are you reporting a bug or a feature?

  • Bug
  • Feature

Expected Behavior

When using AXARadio with React, the component behaves as "uncontrolled", although it is set as "controlled" by the code. E.g. the user can "check" the radio button, although its "checked" props is set to false.

E.g. in the simplified code bellow, the option"b" should be selected and user should be unable to select option "a". However, the user is able to select option "a".
...
const AXARadioReact = withReact(AXARadio);
...
this.state = {
radio: 'b'
}
...
handleRadioChange = (event) => { //intentionally empty
}
....
<AXARadioReact
value="a"
name="name1"
onChange={this.handleRadioChange}
checked={this.state.radio === 'a'}
>
a

<AXARadioReact
value="b"
name="name1"
onChange={this.handleRadioChange}
checked={this.state.radio === 'b'}
>
b

.....

Currently is the user can "check" the radio button, although its "checked" props is set to "false"

Steps to Reproduce the Problem

(see code snips above)

  1. Create a AXARadio with React
  2. Place multiple AxaRadioReact buttons into a component (with the same name)
  3. Set their checked props e.g. to "false"
  4. Run the react application and try to switch between the options of radio buttons (it should not be possible, but it is)

Specifications

Please provide any relevant information about your setup - os, browser, node, npm, etc. -->

  • Browser: Chrome
  • Browser Version: Version 71.0.3578.98 (Official Build) (64-bit)
  • Platform: Windows

Failure Logs

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions