Breaking change in Mantine focusRing styles being applied to programmatically-focused elements in 5.6.x and above

[Nantris]

What package has an issue

@mantine/core

Describe the bug

Short version: So the order of events is like:

• Focus an element (Nothing happens)
• Press tab (with buttons this moves to the next item properly, but with tabIndex="-1", the first Tab press focuses the same element, but shows the focus-ring)

You can see in this screen capture, that the element turns red when it's :focus but does not receive the focus-ring until Tab is pressed again, even though it's already the active element.

https://imgur.com/a/ipNLvux

---

Long version: Below 5.6.x, the behavior of the focusRing was as described in this issue: https://github.com/mantinedev/mantine/issues/2069#issue-1335359479

After 5.6.x, the behavior is as described in this later comment: https://github.com/mantinedev/mantine/issues/2069#issuecomment-1294279603

What version of @mantine/hooks page do you have in package.json?

5.6.3

If possible, please include a link to a codesandbox with the reproduced problem

See instructions within repro: https://codesandbox.io/s/amazing-moore-cvbplh?file=/src/App.tsx

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

Unknown what change caused this behavior, but it persists in 5.7.x. This is an extremely problematic UI problem for applications with keyboard-based navigation because users are not able to tell where the focus has gone.

[rtivital]

It was as expected:

• if the user uses keyboard to navigate, they will see focus ring
• if the user uses mouse to navigate, they will not see focus ring