Tab focus gets trapped

[TrevorBurnham]

When I tab into the example at https://codemirror.net/, I'm unable to tab out (Chrome 67, macOS). The only relevant issue I could find is #1909. Is there a trick to tabbing out of the CodeMirror widget, or is this a bug?

[marijnh]

At some point, I let people convince me that the editor should override tab by default. I think that was a bad call, now, but won't be able to change it until the next major release. You can disable the default tab binding with an option like extraKeys: {Tab: false} (binding a key to false disables handling of it entirely) to get the browser tab behavior back.

[TrevorBurnham]

Ah, that makes sense. Thank you. I'm going to change the behavior in my app to something like "Use {extraKeys: {Tab: false}} unless the user clicked into the CodeMirror instance." Maybe that should be the default behavior?

[Worie]

Sorry for reviving old topic, but I have exactly same case - I wan't to disable tab-to-indent functionality if user focused editor via keyboard (and I have that up and working with {extraKeys: {Tab: false}}, but I want to restore the original behaviour in the runtime as well.

In other words: I want to conditionally enable/disable default tab-functionality of CodeMirror.
I'm using vue-codemirror, which uses CodeMirror 5.44.0 under the hood. I've tried something like this:

this.codemirror.setOption("extraKeys", {
      "Tab" : () => {
        if (this.$el.matches('.is-tab-disabled')) {
          return codemirror.PASS; // 
        }
      }});

But, unfortunately this does not pass event handling to browser even if the class is present (focus is still trapped within editor instance) and overwrites default behaviour of adding indentation as well. So, my question would be: what would be a proper way to achieve that, and is it possible to restore original key handling of codemirror after it has been disabled with { Tab: false } if this option seems valid.

Thanks for your time!

[marijnh]

You should be able to, if you have an object const noTab = {Tab: false}, do .addKeyMap(noTab) to disable tab and .removeKeyMap(noTab) to re-enable it. (Note that the object passed to removeKeyMap must be exactly the same as the one passed to addKeyMap, so you have to store it somewhere)

[Worie]

Yup, that did the job! Thanks for your support.

[agonhasani]

What about Shift+Tab(which should switch the focus to the previous element)?
{"Shift-Tab": false} doesn't seem to be working.

[marijnh]

editor.setOption("extraKeys", {"Shift-Tab": false}) seems to work for me

(Just make sure your binding has a higher precedence than the default binding for Shift-Tab)

[agonhasani]

Yes, it works now.

The problem in my case was that I have a hidden textarea element which is connected to a CodeMirror instance.
That textarea has an event listener (focus) which will will then switch the focus to the corresponding CodeMirror instance.

So, what I was doing when pressing Shift+Tab was switching the focus from a CodeMirror instance to its textarea host which would then switch the focus back to the same CodeMirror instance.

I have multiple CodeMirror instances and other form elements in a form.
What I am trying to do here is fix the Tab and Shift-Tab navigation between those elements.

Any suggestions?

Setting the tabindex="-1" dynamically to the currently focused textarea element is the only solution that comes to mind.