flux:editor renders multiple autofocus link inputs when used in closed modals
- Dominant language
- Blade
- Stars
- 977
- Forks
- 112
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 21
Description
### Flux version
v2.17.0
### Livewire version
v4.4.2
### Tailwind version
v4.3.0
### Browser and Operating System
Chrome and Firefox on MacOS
### What is the problem?
flux:editor creates a` data-editor="link:url"` input with the autofocus attribute for each editor instance. When multiple editors are mounted on the same page, such as editors inside closed Livewire/Flux modals, multiple autofocus inputs exist in the document simultaneously.
When interacting with another Flux component, Chrome logs:
`Autofocus processing was blocked because a document already has a focused element.`
The warning disappears when the editor components are removed or the link toolbar option is removed.
### Code snippets to replicate the problem
```
Open Modal
```
Verification via Browser Console
To verify the duplicate inputs present in the DOM:
```
// Returns all link URL inputs rendered by the rich text editors
document.querySelectorAll('[data-editor="link:url"]')
// Returns all link URL inputs that carry the autofocus attribute simultaneously
document.querySelectorAll('[data-editor="link:url"][autofocus]')
```
### Behaviour Notes
Removing the components completely prevents the warning.
Removing the link option from the toolbar prop (e.g., leaving toolbar="bold italic") prevents the hidden autofocus inputs from rendering, eliminating the console warning.
### Screenshots/ screen recordings of the problem
https://github.com/user-attachments/assets/9155d210-cf13-42e0-bbb9-b0b7296c70ab
### How do you expect it to work?
The data-editor="link:url" input should only receive focus when the link popover is opened. Closed or inactive flux:editor instances should not render an autofocus input that competes with other elements for document focus.
Ideally, the link URL input would be focused programmatically when the link popover opens rather than using the HTML autofocus attribute.
### Please confirm (incomplete submissions will not be addressed)
- [x] I have provided easy and step-by-step instructions to reproduce the bug.
- [x] I have provided code samples as text and NOT images.
- [x] I understand my bug report will be closed if I haven't met the criteria above.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start at the flux:editor rendering path for the data-editor="link:url" input and reproduce the issue with multiple editors inside closed Flux modals. Check when the autofocus attribute is emitted and verify the finished behavior in Chrome and Firefox by confirming closed editors no longer compete for document focus when another Flux component is used.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 72/100