Skip to content

[EuiModal] Issue with Focus #6848

@kartikrp

Description

@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

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions