fix(ld-radio): prop forwarding

emdgroup-liquid · Dec 2, 2021 · 5f7026b · 5f7026b
1 parent eb3d168
commit 5f7026b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 39 deletions.
diff --git a/src/liquid/components/ld-radio/ld-radio.tsx b/src/liquid/components/ld-radio/ld-radio.tsx
@@ -24,7 +24,7 @@ export class LdRadio implements InnerFocusable {
   /** Automatically focus the form control when the page is loaded. */
   @Prop() autofocus?: boolean
 
-  /** The input value. */
+  /** Indicates whether the radio button is selected. */
   @Prop({ mutable: true, reflect: true }) checked: boolean
 
   /** Disabled state of the radio. */
@@ -36,9 +36,6 @@ export class LdRadio implements InnerFocusable {
   /** Set this property to `true` in order to mark the radio visually as invalid. */
   @Prop() invalid: boolean
 
-  /** Value of the id attribute of the `<datalist>` of autocomplete options. */
-  @Prop() list?: string
-
   /** Display mode. */
   @Prop() mode?: 'highlight' | 'danger'
 
@@ -66,15 +63,12 @@ export class LdRadio implements InnerFocusable {
   }
 
   @Watch('checked')
-  @Watch('form')
   @Watch('name')
-  @Watch('required')
   @Watch('value')
   updateHiddenInput() {
     const outerForm = this.el.closest('form')
     if (!this.hiddenInput && this.name && (outerForm || this.form)) {
-      this.hiddenInput = document.createElement('input')
-      this.el.appendChild(this.hiddenInput)
+      this.createHiddenInput()
     }
 
     if (this.hiddenInput) {
@@ -86,7 +80,6 @@ export class LdRadio implements InnerFocusable {
 
       this.hiddenInput.name = this.name
       this.hiddenInput.checked = this.checked
-      this.hiddenInput.required = this.required
 
       if (this.value) {
         this.hiddenInput.value = this.value
@@ -107,6 +100,15 @@ export class LdRadio implements InnerFocusable {
     }
   }
 
+  private createHiddenInput() {
+    this.hiddenInput = document.createElement('input')
+    this.hiddenInput.type = 'radio'
+    this.hiddenInput.style.visibility = 'hidden'
+    this.hiddenInput.style.position = 'absolute'
+    this.hiddenInput.style.pointerEvents = 'none'
+    this.el.appendChild(this.hiddenInput)
+  }
+
   private handleKeyDown = (ev: KeyboardEvent) => {
     switch (ev.key) {
       case 'ArrowUp':
@@ -187,27 +189,20 @@ export class LdRadio implements InnerFocusable {
       this.autocomplete = outerForm.getAttribute('autocomplete')
     }
 
-    if (outerForm || this.form) {
-      if (this.name) {
-        this.hiddenInput = document.createElement('input')
-        this.hiddenInput.required = this.required
-        this.hiddenInput.type = 'radio'
-        this.hiddenInput.style.visibility = 'hidden'
-        this.hiddenInput.style.position = 'absolute'
-        this.hiddenInput.style.pointerEvents = 'none'
-        this.hiddenInput.checked = this.checked
-        this.hiddenInput.name = this.name
-
-        if (this.form) {
-          this.hiddenInput.setAttribute('form', this.form)
-        }
+    if (this.name && (outerForm || this.form)) {
+      this.createHiddenInput()
+      this.hiddenInput.checked = this.checked
+      this.hiddenInput.name = this.name
 
-        if (this.value) {
-          this.hiddenInput.value = this.value
-        }
+      if (this.form) {
+        this.hiddenInput.setAttribute('form', this.form)
+      }
 
-        this.el.appendChild(this.hiddenInput)
+      if (this.value) {
+        this.hiddenInput.value = this.value
       }
+
+      this.el.appendChild(this.hiddenInput)
     }
   }
 
@@ -234,7 +229,7 @@ export class LdRadio implements InnerFocusable {
           onKeyDown={this.handleKeyDown}
           ref={(ref) => (this.input = ref)}
           type="radio"
-          {...cloneAttributes(this.el)}
+          {...cloneAttributes(this.el, ['autocomplete', 'tone', 'mode'])}
           disabled={this.disabled}
           checked={this.checked}
           tabIndex={

diff --git a/src/liquid/components/ld-radio/readme.md b/src/liquid/components/ld-radio/readme.md
@@ -363,12 +363,11 @@ The `ld-radio` Web Component provides a low level API for integrating the compon
 | -------------- | -------------- | --------------------------------------------------------------------------- | ------------------------- | ----------- |
 | `autocomplete` | `autocomplete` | Hint for form autofill feature.                                             | `string`                  | `undefined` |
 | `autofocus`    | `autofocus`    | Automatically focus the form control when the page is loaded.               | `boolean`                 | `undefined` |
-| `checked`      | `checked`      | The input value.                                                            | `boolean`                 | `undefined` |
+| `checked`      | `checked`      | Indicates whether the radio button is selected.                             | `boolean`                 | `undefined` |
 | `disabled`     | `disabled`     | Disabled state of the radio.                                                | `boolean`                 | `undefined` |
 | `form`         | `form`         | Associates the control with a form element.                                 | `string`                  | `undefined` |
 | `invalid`      | `invalid`      | Set this property to `true` in order to mark the radio visually as invalid. | `boolean`                 | `undefined` |
 | `key`          | `key`          | for tracking the node's identity when working with lists                    | `string \| number`        | `undefined` |
-| `list`         | `list`         | Value of the id attribute of the `<datalist>` of autocomplete options.      | `string`                  | `undefined` |
 | `mode`         | `mode`         | Display mode.                                                               | `"danger" \| "highlight"` | `undefined` |
 | `name`         | `name`         | Used to specify the name of the control.                                    | `string`                  | `undefined` |
 | `readonly`     | `readonly`     | The value is not editable.                                                  | `boolean`                 | `undefined` |

diff --git a/src/liquid/components/ld-radio/test/__snapshots__/ld-radio.spec.ts.snap b/src/liquid/components/ld-radio/test/__snapshots__/ld-radio.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`ld-radio creates hidden input field, if inside a form 1`] = `
 <ld-radio class="ld-radio" name="example" part="root">
   <mock:shadow-root>
-    <input part="input focusable" tabindex="-1" type="radio">
+    <input name="example" part="input focusable" tabindex="-1" type="radio">
     <div class="ld-radio__dot" part="dot"></div>
     <div class="ld-radio__box" part="box"></div>
   </mock:shadow-root>

diff --git a/src/liquid/components/ld-radio/test/ld-radio.spec.ts b/src/liquid/components/ld-radio/test/ld-radio.spec.ts
@@ -1,4 +1,5 @@
 import { newSpecPage } from '@stencil/core/testing'
+jest.mock('../../../utils/cloneAttributes')
 import { LdRadio } from '../ld-radio'
 
 describe('ld-radio', () => {
@@ -300,12 +301,11 @@ describe('ld-radio', () => {
   it('sets initial state on hidden input', async () => {
     const page = await newSpecPage({
       components: [LdRadio],
-      html: `<form><ld-radio name="example" checked required value="test" /></form>`,
+      html: `<form><ld-radio name="example" checked value="test" /></form>`,
     })
     const ldRadio = page.root
     expect(ldRadio.querySelector('input')).toHaveProperty('checked', true)
     expect(ldRadio.querySelector('input')).toHaveProperty('name', 'example')
-    expect(ldRadio.querySelector('input')).toHaveProperty('required', true)
     expect(ldRadio.querySelector('input')).toHaveProperty('value', 'test')
   })
 
@@ -319,7 +319,6 @@ describe('ld-radio', () => {
 
     expect(ldRadio.querySelector('input')).toHaveProperty('name', 'example')
     expect(ldRadio.querySelector('input')).toHaveProperty('checked', false)
-    expect(ldRadio.querySelector('input')).toHaveProperty('required', false)
 
     ldRadio.setAttribute('name', 'test')
     await waitForChanges()
@@ -341,11 +340,6 @@ describe('ld-radio', () => {
 
     expect(ldRadio.querySelector('input')).toHaveProperty('checked', true)
 
-    ldRadio.setAttribute('required', '')
-    await waitForChanges()
-
-    expect(ldRadio.querySelector('input')).toHaveProperty('required', true)
-
     ldRadio.setAttribute('value', 'test')
     await waitForChanges()