basecamp / basecamp/trix

Trix breaks autofocus on <script defer> in Chrome / Safari

Open
#1,187 0 comments 3 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.