fix(radio-group): value handling

change/@fluentui-web-components-9de7616b-042b-4e9d-8c08-6f37d7b8cc7c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix radio/group value handling",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/checkbox/checkbox.ts

@@ -220,7 +220,7 @@ export class BaseCheckbox extends FASTElement {
    *
    * @internal
    */
-  private _validationFallbackMessage: string = '';
+  static _validationFallbackMessage: string = '';
 
   /**
    * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
@@ -235,16 +235,16 @@ export class BaseCheckbox extends FASTElement {
       return this.elementInternals.validationMessage;
     }
 
-    if (!this._validationFallbackMessage) {
+    if (!Checkbox._validationFallbackMessage) {
       const validationMessageFallbackControl = document.createElement('input');
       validationMessageFallbackControl.type = 'checkbox';
       validationMessageFallbackControl.required = true;
       validationMessageFallbackControl.checked = false;
 
-      this._validationFallbackMessage = validationMessageFallbackControl.validationMessage;
+      Checkbox._validationFallbackMessage = validationMessageFallbackControl.validationMessage;
     }
 
-    return this._validationFallbackMessage;
+    return Checkbox._validationFallbackMessage;
   }
 
   /**

packages/web-components/src/radio-group/radio-group.template.ts

@@ -11,7 +11,7 @@ export function radioGroupTemplate<T extends RadioGroup>(): ElementViewTemplate<
       @focusout="${(x, c) => x.focusoutHandler(c.event as FocusEvent)}"
       @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
     >
-      <slot @slotchange="${(x, c) => x.slotchangeHandler(c.event as Event)}"></slot>
+      <slot @slotchange="${(x, c) => x.slotchangeHandler()}"></slot>
     </template>
   `;
 }

packages/web-components/src/radio-group/radio-group.ts

@@ -34,7 +34,7 @@ export class RadioGroup extends FASTElement {
       return;
     }
 
-    this.checkRadio(next);
+    this.enabledRadios[next]?.click();
   }
 
   /**
@@ -246,7 +246,7 @@ export class RadioGroup extends FASTElement {
    *
    * @internal
    */
-  private _validationFallbackMessage!: string;
+  private static _validationFallbackMessage: string = '';
 
   /**
    * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
@@ -263,16 +263,17 @@ export class RadioGroup extends FASTElement {
       return this.enabledRadios[0].validationMessage;
     }
 
-    if (!this._validationFallbackMessage) {
+    if (!RadioGroup._validationFallbackMessage) {
       const validationMessageFallbackControl = document.createElement('input');
       validationMessageFallbackControl.type = 'radio';
       validationMessageFallbackControl.required = true;
       validationMessageFallbackControl.checked = false;
+      validationMessageFallbackControl.name = '##--ThisShouldBeSufficientForATemporaryString--##';
 
-      this._validationFallbackMessage = validationMessageFallbackControl.validationMessage;
+      RadioGroup._validationFallbackMessage = validationMessageFallbackControl.validationMessage;
     }
 
-    return this._validationFallbackMessage;
+    return RadioGroup._validationFallbackMessage;
   }
 
   /**
@@ -470,7 +471,7 @@ export class RadioGroup extends FASTElement {
       }
 
       case ' ': {
-        this.checkRadio();
+        this.enabledRadios[this.checkedIndex]?.click();
         break;
       }
     }
@@ -564,9 +565,9 @@ export class RadioGroup extends FASTElement {
    * @param e - the slot change event
    * @internal
    */
-  public slotchangeHandler(e: Event): void {
-    Updates.enqueue(() => {
-      this.radios = [...this.querySelectorAll('*')].filter(x => x instanceof Radio) as Radio[];
-    });
+  public slotchangeHandler(): void {
+    this.radios = [...this.querySelectorAll('*')].filter(x => x instanceof Radio) as Radio[];
+    /** this looks silly but is needed to trigger the setter updates (form value + checkedIndex) */
+    this.value = this.value; // eslint-disable-line no-self-assign
   }
 }

packages/web-components/src/radio/radio.ts

@@ -88,4 +88,39 @@ export class Radio extends BaseCheckbox {
   public toggleChecked(force: boolean = true): void {
     super.toggleChecked(force);
   }
+
+  /**
+   * The fallback validation message, taken from a native checkbox `<input>` element.
+   *
+   * @internal
+   */
+  static override _validationFallbackMessage: string = '';
+
+  /**
+   * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
+   * specified (e.g., via `setCustomValidity`).
+   *
+   * @public
+   * @remarks
+   * Reflects the
+   * {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`}
+   * property.
+   */
+  public override get validationMessage(): string {
+    if (this.elementInternals.validationMessage) {
+      return this.elementInternals.validationMessage;
+    }
+
+    if (!Radio._validationFallbackMessage) {
+      const validationMessageFallbackControl = document.createElement('input');
+      validationMessageFallbackControl.type = 'radio';
+      validationMessageFallbackControl.required = true;
+      validationMessageFallbackControl.checked = false;
+      validationMessageFallbackControl.name = '##--ThisShouldBeSufficientForATemporaryString--##';
+
+      Radio._validationFallbackMessage = validationMessageFallbackControl.validationMessage;
+    }
+
+    return Radio._validationFallbackMessage;
+  }
 }