fix: FluentRadio cannot be focused from typescript/javascript in MAUI/Blazor application

[gstoro]

🐛 Bug Report

We have a requirement where a FluentRadio has to be focused in a FluentRadioGroup when user has not made any selection , this has to be at runtime and we are using Typescript code to perform that action and we are seeing focus() is not happening , however .click() on FluentRadio is working.

💻 Repro or Code Sample

const inValid = document.getElementsByClassName('invalid'); if (inValid.length > 0) { if (inValid[0].tagName == 'FLUENT-RADIO-GROUP') {

      const firstRadioOption = (inValid[0].getElementsByTagName('fluent-radio')[0] as HTMLElement);

     //firstRadioOption.click();   This works
      firstRadioOption.focus();   //This does not work , need  to talk to Microsoft/FluentUI Team 
  }
  else {
      (inValid[0] as HTMLElement).focus();
  }

}

🤔 Expected Behavior

focus() call should focus the radio button

😯 Current Behavior

focus() is not focusing the element

I dont see any error in console

💁 Possible Solution

I did some googling and came across this related issue in FluentUI-react https://github.com/microsoft/fluentui/issues/28438

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

[vnbaaij]

This is not ready-to-run reproduction code we can use for investigating the issue. You also have not supplied the requested environment details. Help us to help you...

Are you sure the code is being run?

What I'd suggest you try is to see if you can target the radio button in the shadow dom of the fluent component and see if you can set focus to that one.

We do not share any code with the fluentui react components so any issues you find there are unrelated