codemirror / dev

Development repository for the CodeMirror editor project
https://codemirror.net/
Other
5.94k stars 376 forks source link

`EditContext` intercepts input after focus is programmatically transferred #1458

Open chuanqisun opened 3 weeks ago

chuanqisun commented 3 weeks ago

Describe the issue

Minimum repro: https://stackblitz.com/edit/vitejs-vite-y35czl?file=main.js

  <div id="editor-root"></div>
  <div>
    <button>transfer focus</button>
    <input id="input-element" />
  </div>
new EditorView({
  doc: `hello world `,
  extensions: [],
  parent: document.getElementById('editor-root'),
});

document.querySelector('button').onfocus = () =>
  document.querySelector('input').focus();

Repro recording

https://github.com/user-attachments/assets/2f638e98-9c0b-4450-99e4-aa577f89ffe2

Repro step

  1. Click inside the text editor to set focus
  2. Click "transfer focus" button
  3. Observe blinking cursor in text input
  4. Type anything

Expect: text input to receive all keyboard events Actual: editor receives all keyboard events

  1. Set EditorView.EDIT_CONTEXT = false;
  2. Repeat steps, observe that issue goes away

Additional context

I need to move focus from one element to another as part of an accessibility focus trap implementation. In the real code, the element that transfers focus are dummy elements at the beginning and end of the focus trapped area.

Browser and platform

Chrome in Linux, Windows, and MacOS

Reproduction link

https://stackblitz.com/edit/vitejs-vite-y35czl?file=main.js

marijnh commented 3 weeks ago

That appears to be another bug in Chrome's implementation of EditContext. I've reported it as issue 375711382. Until they fix it, the only advice I can offer is to set up your event handlers to avoid triggering this.

chuanqisun commented 3 weeks ago

Thank you for distilling the repro and reporting to Chrome.