Trix breaks autofocus on <script defer> in Chrome / Safari
- Dominant language
- JavaScript
- Stars
- 20k
- Forks
- 1.1k
- Avg merge
- 3d 12h
- Merged PRs (30d)
- 13
Description
When there is another `` with `autofocus`-attribute on the page, trix will take away the focus from the field. I tracked this down to this method (added in 9c433d56b3a9db71ba793f3ace10798d58d48e86)
https://github.com/basecamp/trix/blob/457a834808abe07058e4e8fda1b2cb0452868e2c/src/trix/models/selection_manager.js#L92-L94
which is called when initializing the editor. This only happens when the JS code is loaded using `defer`, and only on Chrome / Safari (thus probably Edge too). I found the following info on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Selection#selection_and_input_focus):
> Safari and Chrome (unlike Firefox) currently focus the element containing selection when modifying the selection programmatically; it's possible that this may change in the future (see [W3C bug 14383](https://www.w3.org/Bugs/Public/show_bug.cgi?id=14383) and [Webkit bug 38696](https://webkit.org/b/38696)).
I think this may be the same issue as described in #1166.
##### Steps to Reproduce
1. Open the following in Chrome (or Safari)
```html
```
_(I was not able to reproduce this on codepen due to their iframe-structure, but it reproduces when hosted normally)_
2. Note that the focus is not on the initial ``-element (the outline is still rendered, but when typing in characters nothing happens). After focusing the element manually a hard-reload is necessary to reproduce the problem.
3. Removing `defer` or the ``-element restores normal autofocus-behavior.
##### Details
* Trix version: 2.1.5
* Browser name and version: Latest Chrome & Safari - works on Firefox
* Operating system: macOS
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with src/trix/models/selection_manager.js at the method around lines 92–94, then reproduce the provided HTML case with the deferred Trix script in Chrome or Safari. Compare behavior with and without defer and review the related issue #1166; done means the separate autofocus input retains functional focus while the editor initializes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100