fix(Radio): fix radio button disabled issue when inside of group (#1477)

dnbexperience · Jun 22, 2022 · e775792 · e775792
1 parent d0756e2
commit e775792
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 10 deletions.
diff --git a/packages/dnb-eufemia/src/components/radio/Radio.js b/packages/dnb-eufemia/src/components/radio/Radio.js
@@ -95,7 +95,7 @@ export default class Radio extends React.PureComponent {
     label_sr_only: null,
     label_position: null,
     checked: null,
-    disabled: false,
+    disabled: null,
     id: null,
     size: null,
     element: 'input',
@@ -316,7 +316,9 @@ export default class Radio extends React.PureComponent {
               checked = this.context.value === value
             }
             group = this.context.name
-            disabled = isTrue(this.context.disabled)
+            if (isTrue(this.context.disabled) && disabled !== false) {
+              disabled = true
+            }
           } else if (typeof rest.name !== 'undefined') {
             group = rest.name
           }

diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/Radio.test.js b/packages/dnb-eufemia/src/components/radio/__tests__/Radio.test.js
@@ -133,13 +133,19 @@ describe('Radio component', () => {
     )
   })
 
-  it('has a disabled attribute, once we set disabled to true', () => {
-    const Comp = mount(<Component />)
+  it('will disable a single button', () => {
+    const Comp = mount(<Component disabled />)
+
+    expect(Comp.find('input').instance().hasAttribute('disabled')).toBe(
+      true
+    )
+
     Comp.setProps({
-      disabled: true,
+      disabled: false,
     })
+
     expect(Comp.find('input').instance().hasAttribute('disabled')).toBe(
-      true
+      false
     )
   })
 
@@ -183,6 +189,46 @@ describe('Radio group component', () => {
     expect(my_event.mock.calls[1][0].value).toBe('second')
   })
 
+  it('will disable a single button within a group', () => {
+    const Comp = mount(
+      <Component.Group>
+        <Component disabled />
+      </Component.Group>
+    )
+
+    expect(Comp.find('input').instance().hasAttribute('disabled')).toBe(
+      true
+    )
+  })
+
+  it('will disable a single button, defined in the group', () => {
+    const Comp = mount(
+      <Component.Group disabled>
+        <Component />
+      </Component.Group>
+    )
+
+    expect(Comp.find('input').instance().hasAttribute('disabled')).toBe(
+      true
+    )
+  })
+
+  it('will overwrite "disable" state, defined in the group', () => {
+    const Comp = mount(
+      <Component.Group disabled>
+        <Component disabled={false} />
+        <Component disabled />
+      </Component.Group>
+    )
+
+    expect(
+      Comp.find('input').first().instance().hasAttribute('disabled')
+    ).toBe(false)
+    expect(
+      Comp.find('input').last().instance().hasAttribute('disabled')
+    ).toBe(true)
+  })
+
   // mount compare the snapshot
   it('have to match group snapshot', () => {
     expect(toJson(Comp)).toMatchSnapshot()

diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
@@ -329,7 +329,7 @@ exports[`Radio group component have to match group snapshot 1`] = `
                   className={null}
                   custom_element={null}
                   custom_method={null}
-                  disabled={false}
+                  disabled={null}
                   element="input"
                   global_status_id={null}
                   group={null}
@@ -426,7 +426,7 @@ exports[`Radio group component have to match group snapshot 1`] = `
                           <FormLabel
                             class={null}
                             className={null}
-                            disabled={false}
+                            disabled={null}
                             element="label"
                             for_id="radio-1"
                             id="radio-1-label"
@@ -458,7 +458,7 @@ exports[`Radio group component have to match group snapshot 1`] = `
                   className={null}
                   custom_element={null}
                   custom_method={null}
-                  disabled={false}
+                  disabled={null}
                   element="input"
                   global_status_id={null}
                   group={null}
@@ -555,7 +555,7 @@ exports[`Radio group component have to match group snapshot 1`] = `
                           <FormLabel
                             class={null}
                             className={null}
-                            disabled={false}
+                            disabled={null}
                             element="label"
                             for_id="radio-2"
                             id="radio-2-label"