livewire / livewire/flux

flux:editor renders multiple autofocus link inputs when used in closed modals

Open
#2,773 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.