closeBrackets() crashes Tab with single or double quotes

[devgutt]

Describe the issue

The issue happens when I try to write single or double quoted strings like in the example below:

Screen.Recording.2023-06-21.at.11.35.37.PM.mov

This video was recorded using the preview code editor on this page: https://codemirror.net/examples/tab/

I am using the U.S. International keyboard layout on macOS, and I believe this happens because of the accent marks. When I use the U.S. keyboard layout only, the problem doesn't happen.

The problem is related to closeBrackets on @codemirror/autocomplete because it doesn't happen if I remove the extension.

Browser and platform

U.S. International keyboard layout, MacOs, Chrome

Reproduction link

No response

[marijnh]

Could you please say, in words, which keys I have to press to reproduce this?

Also, you mention crashing the tab, but I see the video end with the focus moved to the textarea below the editor and the cursor still blinking.

[devgutt]

hey Marijn, to reproduce you need to change the keyboard layout to US International (so it will enable accent characters, like á, é), and type something like console.log('test'. The autocomplete will change this to console.log('test'') (include automatically an extra single quote (') and close the parentheses), and then the Tab will stop working.

As you can see on the video above, when I go to the next line and type Tab it will exit the editor, instead of move the cursor to the right (Tab).

These are the extensions I am using. When I comment closeBrackets() it doesn't cause any problem with indentWithTab.

[marijnh]

I don't have this 'autocomplete' that adds a single quote after typing console.log('test'. But then, you still didn't tell me which keys you are pressing so you may be doing something different.

[devgutt]

This is the exact key sequence I typed: console.log('test'<space><ArrowRight><Enter>

Then the autocomplete includes automatically the extra ' and the ) when I press console.log('test''). Then I press ArrowRight and Enter and the Tab is not working anymore.

hmm and maybe it is something related to the javascript autocomplete, because if I type console.log('test' the problem appears. If I type only ('test' it doesn't show a problem.

[devgutt]

Screen.Recording.2023-06-23.at.2.12.01.PM.mov

Interesting in this video above, I used the accessibility keyboard to show the keys I pressed. Notice when I type the second ' the keyboard shows the accent characters and the shows the extra '. So, on keyboards with accent, some keys has 2 stages, one for the accent like ' and the second to see if you will type a letter that could be combined. This is the same thing for ", because you have, for example, ä in German (" + a). I hope it helps.

[devgutt]

also Marijn, I see here: https://github.com/codemirror/lang-javascript/blob/main/src/javascript.ts#L49C2-L54C4

languageData: {
    closeBrackets: {brackets: ["(", "[", "{", "'", '"', "`"]},
    commentTokens: {line: "//", block: {open: "/*", close: "*/"}},
    indentOnInput: /^\s*(?:case |default:|\{|\}|<\/)$/,
    wordChars: "$"
  }

that maybe the single quote ("'") is being used on closeBrackets? I didn't investigate further though.

[marijnh]

Thanks, I managed to reproduce it. Was an obscure interaction between the way compositions are handled and an optimization in the way the content DOM was updated. Attached patch should help.

[devgutt]

Awesome Marijn, thanks a lot.