[Bug]: nesting text-input in radio group cases unexpected behaviour

[yudeeeth]

Component

RadioGroup

Package version

3.0.0-beta.76

@microsoft/fast-element version

2.0.1

Environment

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  npmPackages:
    @fluentui/tokens: 1.0.0-alpha.16 => 1.0.0-alpha.16 
    @fluentui/web-components: 3.0.0-beta.79 => 3.0.0-beta.79 
    @microsoft/fast-element: 2.0.0-beta.26 => 2.0.0-beta.26

Current Behavior

Typing something in a text input inside of a radio button, and then focusing out deselects the radio, despite the radio still having the property of checked.

Expected Behavior

When the same actions as above are done, then the radio option should not get deselected.

Reproduction

https://stackblitz.com/edit/vitejs-vite-csgospaq?file=index.html

Steps to reproduce

1. click on the text input , this should select the associated radio button.
2. click outside the radio options, say below it, to make focus go out of the text field,
3. this should immediately make the radio option visually be deselected.

Are you reporting an Accessibility issue?

no

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[mohamedmansour]

/cc @chrisdholt

[radium-v]

Here's a forked stackblitz that might help unblock for the time being: https://stackblitz.com/edit/vitejs-vite-rqmnaq82?file=src%2Fmain.ts

There are a few things going on that need to be addressed:

• The radio group is capturing any change events, which the text input emits when its own value changes. This is what's causing the radio to get unchecked: since the text input isn't a radio, and the target of the change event can't be found in the list of radios, the radio group clears its results. To prevent this from happening, e.stopImmediatePropagation() can be used with the text input's change event.
• For the field: while you can slot things that aren't <label> elements in the label slot, an alternative approach is to slot both the radio and the text input into the input slot, and override the grid-area for the text input.
• If the radio's value is intended to be tied to a form, the radio's value can be bound to the text input's value.
• The text input's tabindex can be tied to the checked state of the radio, so it's only tabbable when the radio is checked.