radio group

Author: nielslyngsoe

packages/uui-form/lib/uui-form.story.ts

@@ -5,14 +5,21 @@ import '@umbraco-ui/uui-checkbox/lib';
 import '@umbraco-ui/uui-slider/lib';
 import '@umbraco-ui/uui-radio/lib';
 import '@umbraco-ui/uui-toggle/lib';
+import { UUIRadioGroupEvent } from '@umbraco-ui/uui-radio/lib/UUIRadioGroupEvent';
 
 export default {
   id: 'uui-form',
   title: 'Inputs/Form',
   component: 'uui-form',
 };
 
-export const Overview: Story = () => html` <form is="uui-form">
+const _onRadioGroupChanged = (e: UUIRadioGroupEvent) => {
+  e.target.error = e.target.value !== 'radio2';
+};
+
+export const Overview: Story = () => html` <form
+  is="uui-form"
+  style="max-width: 800px;">
   <div style="margin-bottom: 15px;">
     <uui-checkbox
       name="checkbox"
@@ -31,7 +38,11 @@ export const Overview: Story = () => html` <form is="uui-form">
   </div>
 
   <div style="margin-bottom: 15px;">
-    <uui-radio-group name="radio" label="This is my radio" required>
+    <uui-radio-group
+      name="radio"
+      label="This is my radio"
+      required
+      @change=${_onRadioGroupChanged}>
       <uui-radio value="radio1" label="radio1" name="radio1">Label</uui-radio>
       <uui-radio value="radio2" label="radio2" name="radio2">Label</uui-radio>
       <uui-radio value="radio3" label="radio3" name="radio3">Label</uui-radio>

packages/uui-radio/lib/uui-radio-group.element.ts

@@ -115,15 +115,14 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
   private _handleSlotChange(e: Event) {
     // TODO: make sure to diff new and old ones to only add and remove event listeners on relevant elements.
 
-    if (this._radioElements) {
-      this._radioElements.forEach(el => {
-        el.removeEventListener(
-          UUIRadioEvent.CHANGE,
-          // @ts-ignore TODO: fix typescript error
-          this._handleSelectOnClick as EventHandlerNonNull
-        );
-      });
-    }
+    this._radioElements?.forEach(el => {
+      el.removeEventListener(
+        UUIRadioEvent.CHANGE,
+        // @ts-ignore TODO: fix typescript error
+        this._handleSelectOnClick as EventHandlerNonNull
+      );
+      el.removeEventListener('blur', this._onChildBlur);
+    });
 
     this._selected = null;
     this._radioElements = (e.target as HTMLSlotElement)
@@ -137,6 +136,7 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
           // @ts-ignore TODO: fix typescript error
           this._handleSelectOnClick as EventHandlerNonNull
         );
+        el.addEventListener('blur', this._onChildBlur);
       });
 
       const checkedRadios = this._radioElements.filter(
@@ -160,6 +160,9 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
         this.value = checkedRadios[0].value;
         this._selected = this._radioElements.indexOf(checkedRadios[0]);
         if (checkedRadios[0].disabled === false) {
+          this._radioElements.forEach(el => {
+            el.makeUnfocusable();
+          });
           checkedRadios[0].makeFocusable();
         } else {
           this._makeFirstEnabledFocusable();
@@ -177,6 +180,9 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
 
   private _makeFirstEnabledFocusable() {
     this._selected = null;
+    this._radioElements?.forEach(el => {
+      el.makeUnfocusable();
+    });
     this._findNextEnabledElement()?.makeFocusable();
   }
 
@@ -243,6 +249,10 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
     this.dispatchEvent(new UUIRadioGroupEvent(UUIRadioGroupEvent.CHANGE));
   }
 
+  private _onChildBlur = () => {
+    this.pristine = false;
+  };
+
   private _handleSelectOnClick = (e: UUIRadioEvent) => {
     if (e.target.checked === true) {
       this.value = e.target.value;

packages/uui-radio/lib/uui-radio.element.ts

@@ -161,7 +161,22 @@ export class UUIRadioElement extends LitElement {
   public label = '';
 
   @property({ type: Boolean, reflect: true })
-  public checked = false;
+  private _checked = false;
+  public get checked() {
+    return this._checked;
+  }
+  public set checked(value) {
+    this._checked = value;
+    if (value === true) {
+      this.setAttribute('aria-checked', '');
+      if (!this.disabled) {
+        this.setAttribute('tabindex', '0');
+      }
+    } else {
+      this.setAttribute('tabindex', '-1');
+      this.removeAttribute('aria-checked');
+    }
+  }
 
   private _disabled = false;
 
@@ -204,17 +219,10 @@ export class UUIRadioElement extends LitElement {
   }
 
   private _onChange() {
-    if (this.inputElement.checked) {
-      this.checked = true;
-      this.setAttribute('aria-checked', '');
-      if (!this.disabled) {
-        this.setAttribute('tabindex', '0');
-        this.focus();
-      }
-    } else {
-      this.checked = false;
-      this.setAttribute('tabindex', '-1');
-      this.removeAttribute('aria-checked');
+    const checked = this.inputElement.checked;
+    this.checked = checked;
+    if (checked) {
+      this.focus();
     }
     this.dispatchEvent(new UUIRadioEvent(UUIRadioEvent.CHANGE));
   }
@@ -243,6 +251,15 @@ export class UUIRadioElement extends LitElement {
       this.setAttribute('tabindex', '0');
     }
   }
+  /**
+   * Call to make the element focusable, this sets tabindex to 0.
+   * @method makeUnfocusable
+   */
+  public makeUnfocusable() {
+    if (!this.disabled) {
+      this.setAttribute('tabindex', '-1');
+    }
+  }
 
   connectedCallback() {
     super.connectedCallback();