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/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

@@ -564,9 +564,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

@@ -33,7 +33,6 @@ export class Radio extends BaseCheckbox {
   protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void {
     super.disabledChanged(prev, next);
     if (next) {
-      this.checked = false;
       this.tabIndex = -1;
     }