[EuiModal] Issue with Focus

[kartikrp]

Describe the bug
Our Team has recently made a shift from eui@67 to eui@76. The application we have built uses modals for form submissions a lot. While filling one of the forms, user can request for some specific data to be fetched from the server by clicking on a button provided in the form (this is not a footer button). When we click on this button the focus is lost from the button. The behaviour in eui@67 was as such that if you press tab, the focus will return to the next element present in the form (which is the expected behaviour, when someone presses tab in a form). But now in eui@76, whenever the focus is lost due to clicking on button for a request, and the tab is pressed, the focus returns to the close modal button in the modal heading(the cross button), which I guess is not the expected behaviour.

Environment and versions

• EUI version: 76.3.0
• Browser: Google Chrome
• Operating System: Ubuntu

Expected behavior
If by any means the focus in lost on an element in a form in a modal, it should return to the next element present and not the close button in the modal header(the cross button).

Minimum reproducible sandbox
https://codesandbox.io/s/focus-issue-inside-modal-5459fz

You can change the elastic/eui version in the sandbox to see the effect

[kartikrp]

@cchaos @cee-chen @thompsongl @miukimiu

[tkajtoch]

@kartikrp We're actively working on fixing it. We found the cause and looking at possible working solutions at the moment

[tkajtoch]

Hi @kartikrp! We developed a fix for 3rd-party library we're using to control focus and we'll update it in EUI as soon as it's released. Thank you for your patience!

[cee-chen]

@kartikrp As of the latest EUI release and upgrade to react-focus-on 3.9.1, this issue should be fixed:

https://codesandbox.io/s/focus-issue-inside-modal-forked-mk9l55

All that was changed within the CodeSandbox fork was updating EUI to v84.0.0. If for any reason (e.g. Emotion issues, breaking changes) you can't make the leap to the latest EUI, you can use your package.json resolutions to force react-focus-on to ^3.9.1. - the focus behavior should still be fixed by doing so.

Hope that helps!

[kartset]

@tkajtoch and @cee-chen, thank you for the update and apologies for the late response. I'll ask the team to do the updates.