removed group behavior from radio

microsoft · Apr 23, 2020 · 76331ae · 76331ae
1 parent d5420c0
commit 76331ae
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 107 deletions.
diff --git a/packages/web-components/fast-components/src/radio/fixtures/base.html b/packages/web-components/fast-components/src/radio/fixtures/base.html
@@ -8,17 +8,17 @@ <h4>Defaults</h4>
     </div>
 
     <h4>Checked</h4>
-    <fast-radio name="checked" value="checked" checked></fast-radio>
+    <fast-radio value="checked" checked></fast-radio>
 
     <!-- Required -->
     <h4>Required</h4>
-    <fast-radio name="required" value="required" required></fast-radio>
+    <fast-radio value="required" required></fast-radio>
 
     <!-- Disabled -->
     <h4>Disabled</h1>
-    <fast-radio name="disabled" disabled></fast-radio>
-    <fast-radio name="disabled" disabled>label</fast-radio>
-    <fast-radio name="disabled" disabled checked>checked</fast-radio>
+    <fast-radio disabled></fast-radio>
+    <fast-radio disabled>label</fast-radio>
+    <fast-radio disabled checked>checked</fast-radio>
 
     <h4>Inline</h4>
     <fast-radio name="fruit-inline" value="apples" checked>Apples</fast-radio>
@@ -27,9 +27,9 @@ <h4>Inline</h4>
 
     <h4>Vertical</h4>
     <fieldset style="display: flex; flex-direction: column; align-items: start;">
-        <legend>Fruit</legend>
+        <legend id="fruit-group">Fruit</legend>
         <fast-radio name="fruit" value="apples" checked>Apples</fast-radio>
-        <fast-radio name="fruit" value="bananas" >Bananas</fast-radio>
+        <fast-radio name="fruit" aria-label="bananas" value="bananas" >Bananas</fast-radio>
         <fast-radio name="fruit" value="honeydew">Honeydew</fast-radio>
         <fast-radio name="fruit" value="oranges">Oranges</fast-radio>
     </fieldset>

diff --git a/packages/web-components/fast-components/src/radio/radio.template.ts b/packages/web-components/fast-components/src/radio/radio.template.ts
@@ -19,7 +19,11 @@ export const RadioTemplate = html<Radio>`
         </div>
         ${when(
             x => x.childNodes.length,
-            html` <label part="label" class="label"><slot></slot></label> `
+            html`
+                <label part="label" class="label">
+                    <slot></slot>
+                </label>
+            `
         )}
     </template>
 `;
diff --git a/packages/web-components/fast-components/src/radio/radio.ts b/packages/web-components/fast-components/src/radio/radio.ts
@@ -1,15 +1,6 @@
 import { attr, observable } from "@microsoft/fast-element";
-import {
-    keyCodeArrowDown,
-    keyCodeArrowLeft,
-    keyCodeArrowRight,
-    keyCodeArrowUp,
-    keyCodeSpace,
-} from "@microsoft/fast-web-utilities";
+import { keyCodeSpace } from "@microsoft/fast-web-utilities";
 import { FormAssociated } from "../form-associated";
-import { FASTRadio } from "./";
-
-const radioGroups = new Map<string, FASTRadio[]>();
 
 export class Radio extends FormAssociated<HTMLInputElement> {
     @attr({ attribute: "readonly", mode: "boolean" })
@@ -84,25 +75,9 @@ export class Radio extends FormAssociated<HTMLInputElement> {
         }
 
         this.$emit("change");
-        this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true }));
         this.checked ? this.classList.add("checked") : this.classList.remove("checked");
         this.checkedAttribute = this.checked;
-
-        if (this.checked) {
-            this.updateOtherGroupRadios();
-        }
-    }
-
-    private updateOtherGroupRadios(): void {
-        if (this.name !== undefined) {
-            const radioGroup = radioGroups.get(this.name);
-            radioGroup?.forEach((radio: FASTRadio) => {
-                if (radio.getAttribute("value") !== this.value) {
-                    radio.removeAttribute("checked");
-                    radio.checked = false;
-                }
-            });
-        }
+        this.updateForm();
     }
 
     protected proxy: HTMLInputElement = document.createElement("input");
@@ -112,101 +87,29 @@ export class Radio extends FormAssociated<HTMLInputElement> {
      * This is necessary to provide consistent behavior with
      * normal input radios
      */
-    // TODO: marjon check if this is needed for radio buttons?
     private dirtyChecked: boolean = false;
 
     constructor() {
         super();
         this.proxy.setAttribute("type", "radio");
-        this.addEventListener("keydown", this.keydownHandler);
     }
 
     public connectedCallback(): void {
         super.connectedCallback();
         this.updateForm();
-        if (this.name !== undefined) {
-            const radioGroup = radioGroups.get(this.name);
-            if (radioGroup) {
-                radioGroup.push(this);
-            } else {
-                radioGroups.set(this.name, [this]);
-            }
-        }
-    }
-
-    public disconnectedCallback(): void {
-        if (this.name !== undefined) {
-            const group = radioGroups.get(this.name);
-            if (group) {
-                group.splice(group.indexOf(this), 1);
-            }
-
-            if (group?.length === 0) {
-                radioGroups.delete(this.name);
-            }
-        }
     }
 
     private updateForm(): void {
         const value = this.checked ? this.value : null;
         this.setFormValue(value, value);
     }
 
-    private moveToRadioByIndex = (group: FASTRadio[], index: number): void => {
-        group[index].checked = true;
-        group[index].focus();
-    };
-
-    public keydownHandler = (e: KeyboardEvent): void => {
-        const group: FASTRadio[] = radioGroups.get(this.name) as FASTRadio[];
-        let index = 0;
-        if (group && this.name !== undefined) {
-            switch (e.keyCode) {
-                case keyCodeArrowRight:
-                case keyCodeArrowUp:
-                    index = group.indexOf(this) + 1;
-                    index = index === group.length ? 0 : index;
-                    while (index < group.length) {
-                        if (!group[index].disabled) {
-                            this.moveToRadioByIndex(group, index);
-                            break;
-                        } else if (index === group.indexOf(this)) {
-                            break;
-                        } else if (index + 1 >= group.length) {
-                            index = 0;
-                        } else {
-                            index += 1;
-                        }
-                    }
-                    break;
-                case keyCodeArrowLeft:
-                case keyCodeArrowDown:
-                    index = group.indexOf(this) - 1;
-                    index = index < 0 ? group.length - 1 : index;
-                    while (index >= 0) {
-                        if (!group[index].disabled) {
-                            this.moveToRadioByIndex(group, index);
-                            break;
-                        } else if (index === group.indexOf(this)) {
-                            break;
-                        } else if (index - 1 < 0) {
-                            index = group.length - 1;
-                        } else {
-                            index -= 1;
-                        }
-                    }
-                    break;
-            }
-        }
-    };
-
     public keypressHandler = (e: KeyboardEvent): void => {
         super.keypressHandler(e);
         switch (e.keyCode) {
             case keyCodeSpace:
                 if (!this.checked) {
                     this.checked = true;
-                    this.updateOtherGroupRadios();
                 }
                 break;
         }