cleanup

Author: JesmoDev

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

@@ -77,6 +77,11 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
     this.addEventListener('keypress', this._onKeypress);
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'radiogroup');
+  }
+
   /**
    * This method enables <label for="..."> to focus the select
    */
@@ -102,12 +107,7 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
     return undefined;
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.hasAttribute('role')) this.setAttribute('role', 'radiogroup');
-  }
-
-  private _radioElements!: UUIRadioElement[];
+  private _radioElements: UUIRadioElement[] = [];
   private _setNameOnRadios(name: string) {
     this._radioElements?.forEach(el => (el.name = name));
   }
@@ -134,52 +134,51 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
       .assignedElements({ flatten: true })
       .filter(el => el instanceof UUIRadioElement) as UUIRadioElement[];
 
-    if (this._radioElements.length > 0) {
-      this._radioElements.forEach(el => {
-        el.addEventListener(
-          UUIRadioEvent.CHANGE,
-          // @ts-ignore TODO: fix typescript error
-          this._handleSelectOnClick as EventHandlerNonNull
-        );
-        el.addEventListener('blur', this._onChildBlur);
-      });
+    // Only continue if there are radio elements
+    if (this._radioElements.length === 0) return;
 
-      this._setNameOnRadios(this.name);
-      if (this.disabled) {
-        this._setDisableOnRadios(true);
-      }
+    this._radioElements.forEach(el => {
+      el.addEventListener(
+        UUIRadioEvent.CHANGE,
+        // @ts-ignore TODO: fix typescript error
+        this._handleSelectOnClick as EventHandlerNonNull
+      );
+      el.addEventListener('blur', this._onChildBlur);
+    });
+
+    this._setNameOnRadios(this.name);
+    if (this.disabled) {
+      this._setDisableOnRadios(true);
+    }
+
+    const checkedRadios = this._radioElements.filter(el => el.checked === true);
 
-      const checkedRadios = this._radioElements.filter(
-        el => el.checked === true
+    if (checkedRadios.length > 1) {
+      this._radioElements.forEach(el => {
+        el.checked = false;
+      });
+      this.value = '';
+      console.error(
+        'There can only be one checked radio among the <' +
+          this.nodeName +
+          '> children',
+        this
       );
+    }
 
-      if (checkedRadios.length > 1) {
+    if (checkedRadios.length === 1) {
+      this.value = checkedRadios[0].value;
+      this._selected = this._radioElements.indexOf(checkedRadios[0]);
+      if (checkedRadios[0].disabled === false) {
         this._radioElements.forEach(el => {
-          el.checked = false;
+          el.makeUnfocusable();
         });
-        this.value = '';
-        console.error(
-          'There can only be one checked radio among the <' +
-            this.nodeName +
-            '> children',
-          this
-        );
-      }
-
-      if (checkedRadios.length === 1) {
-        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();
-        }
+        checkedRadios[0].makeFocusable();
       } else {
         this._makeFirstEnabledFocusable();
       }
+    } else {
+      this._makeFirstEnabledFocusable();
     }
   }