[SF_ACC][RadioButton]: Arrow keys are not working after re-rendering

[2bno1]

Describe the bug

Arrow keys of radio button are not working anymore after re-rendering, please reproduce the issue using the example below.

Isolated Example

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

Reproduction steps

1. Open https://stackblitz.com/edit/github-ppnktf1z?file=src%2FApp.tsx
2. Tab to "Male" radio button
3. Press "Right" (or "Down") arrow key, the arrow keys are working
4. Click "Reorder Fields"
5. Tab to "Male" radio
6. Press "Right" (or "Down") arrow key, the arrow keys are not working

Expected Behaviour

Arrow keys should work after re-rendering.

Screenshots or Videos

No response

UI5 Web Components for React Version

2.5.0

UI5 Web Components Version

2.5.1

Browser

Chrome

Operating System

macOS

Additional Context

No response

Relevant log output

Organization

SuccessFactors

Declaration

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

[Lukas742]

Hi @2bno1

you're using the same key ("name") in the same scope which is causing this behavior. When removing all keys (redundant in the example) or when setting unique values, then the components work as expected.

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