Description

Opening a modal from a relation manager causes focus issues with form fields. Some of the symptoms of this bug are:

1. When any RM modal is opened (header action, table action, filters in a slideover, etc.), text fields remains selected even after clicking out of the field.
2. Typing after clicking out of the field continues to update the field.
3. Since the text field remains selected, trying to trigger buttons, toggles, doesn’t work.
4. If your form is long and scrolls, clicking a button at the bottom will scroll you back to the still selected field.
5. To trigger a button/toggle/radio deck etc. you have to double click quickly, which apparentetly breaks through the focus issue (however only for that click).

I’ve tracked this down to the tabindex="0" on the relation manager when multiple relation managers are used. The tabindex seems to be conflicting with the modal's focusing.

This is probably some type of conflict/bug with livewire or alpine.js's focus trap, as tabindex="0" has been in core for more than 2 years. But ultimately, I'm unsure as to why tabindex="0" is used at all. You can already tab to the RM's buttons/links without it. And Filament doesn't add tabindex to subnavigation groups for example. (That said I'm not an accesibility expert either).

This is only an issue when multiple relation managers (or relation manager groups) are on the page (ie when the tab navigation component is displayed). Displaying a single relation manager or single relation manager group doesn't cause this issue as tabindex="0" is only added conditionaly when more than one RM are displayed via tabs.

I did try rolling back filament and livewire as far as I could go and still ran into this issue so not sure what version of filament/livewire/alpine this was introduced in

Visual changes

Here's a video of the issue from Filament's demo page, but this issue has also been confirmed in our production app, as well as my plugin demo app.

Functional changes

This PR just removes tabindex="0" from the conditional.

I've also tested that:

1. The relation manager's actions, links, etc. can still be tabbed to,
2. When opening a modal, the autofocus is still applied to the first element,
3. Focus trapping still works.
4. ->modalAutoFocus(false) also continues to work

If there is a better way to handle this then let me know.

• Code style has been fixed by running the composer cs command.
• Changes have been tested to not break existing functionality.
• Documentation is up-to-date.

After doing some more investigating this should also address and close #15289, #14999, #14913

There could be other issues out there, but that's as far as I looked.