[RadioButton]: [When we select any radio button focus is getting lost immediately.]

[jadhavarjun]

Describe the bug

When we select any radio button focus is getting lost immediately.

Isolated Example

https://stackblitz.com/edit/github-37urtw?file=src%2FApp.tsx

Reproduction steps

1. Click on stackblitz link initially you get first radio button selected.
2. Try to select any other radio button by tab or mouse you will see after selecting radio button focus is getting lost.
3. And after that when you click tab then focus will be visible on same radio button that selected previously.
   ...

Expected Behaviour

Focus should be visible to the user, after we select or click radio button.

Screenshots or Videos

No response

UI5 Web Components for React Version

~1.29.0

UI5 Web Components Version

~1.24.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @jadhavarjun

when selecting a radio button, you're updating the table data which leads to remounting the rows. This is why the focus is lost. In general it's recommended to only update the table data when necessary, so you could for example persist the changes in a state and only apply them to the table when needed. If the behavior you implemented is because you only want one radio to be selected, then you could also use the name prop, which groups all RadioButtons with the same name and allows only a single one of them to be selected: https://stackblitz.com/edit/github-37urtw-yw2nhm?file=src%2FApp.tsx

If your use-case requires you to update the data on unser interaction, you'll probably have to apply the focus manually.