Quill: Disable tab

[adhsu]

I didn't see this anywhere in the documentation, sorry if I missed it. I'd like to be able to disable tabbing, so that I can type a message and tab to a submit button/etc.

[ncammarata]

Related: how is tabindex set?

[jhchen]

The somewhat hacky way to disable tabs right now is

var keyboard = editor.getModule('keyboard');
delete keyboard.hotkeys[9];    // 9 is the key code for tab

@ncammarata I didn't set the tabindex on any of our examples but it can be set to whatever is desired in the toolbar.

[kmoe]

Would you appreciate a PR to add this as an option in the config? So you could do

var editor = new Quill('#editor', {
  tab: 'disabled'
});

or similar.

[kmoe]

Actually it would be a module option rather than a top-level one. But you get the idea. Preparing PR now in case you do want this.

[jhchen]

In this case I think a module might be too heavyweight. The best approach might just be to add an easy to use removeHotkey function to the keyboard module. Do you want to give this route a try?

[kmoe]

Yes, sorry, by 'module option' I meant an option you can pass into a module rather than a new module! removeHotkey makes sense and would be easy to do.
Do you think it should just take the raw key number (removeHotkey(9)) or a string mapped using the dom module (removeHotkey('TAB'))?

[jhchen]

Yes I think it should either take a hotkey object or string. If it's a string it should look up Keyboard.hotkeys and use that hotkey object.

[LeZuse]

Just noticed that removeHotkey nicely solves the problem for the TAB keystroke, but does not work for Shift+TAB which is a bummer, because you obviously will not removeHotkey Shift. Any workaround suggestions?

[jhchen]

You can pass in removeHotkeys({ key: dom.KEYS.TAB, shiftKey: true })

[acidjazz]

Why isn't this functionality documented anywhere after a year? I tried to find removeHotKeys or removeHotKey in the keyboard module and was unable to call it, I ended up finding I could

var keyboard = editor.getModule('keyboard');
delete keyboard.bindings[9];

I honestly think tab: 'disabled' or tabs: false is a more understandable and guessable option, especially with the mess for shift+tab as well

Also what about turning this on and off on the fly?

[benbro]

The keyboard module is documented here
You can use quill.keyboard.addBinding() to add a binding.

You can override the default bindings in the config:
http://codepen.io/anon/pen/JRJgQB

[acidjazz]

@benbro thank you, I thought I had read through everything, but googling this instead brought me to this issue, maybe we can add examples of removeHotKey or removeHotKeys? Or were they removed and this is a more proper example now?

Your example also has a 'remove tab' do nothing which is more than the example documented; is this to fix shift+tab as well?

I still honestly think 19 lines of code is a bit much to disable tabs, still would recommend something close to what @kmoe originally suggested.

Glad to see this issue now ends w/ a link to the proper usage for now though.

[hhubik]

I have the opposite problem. I have an app with a few input elements, one of which is quill. I specified the tab order using the tabindex on each input element. That works fine, except when I tab to the quill element, the focus seems to be on the border of the element. How do I force the focus be in the text input area of quill so that when I start typing, the text goes in the right place? Thanks.

[benbro]

@hhubik can you please fork the codepen example, modify it to reproduce your case and open a new github issue describing it?

[hhubik]

@benbro I cannot re-create the problem in codepen. When I set the tabindex of the editor-container div, everything works as I expect (when I tab to the editor, the text input area gets the focus).

The issue I am having could be related to the fact that I am using quill hosted in the Angular2 component Editor from PrimeFaces.

When I set the tabindex on the Editor component, that is when I see the problem I described earlier. If anyone familiar with Angular 2 knows how I can set the tabindex on the editor-container inside of the Editor component, please let me know.

[aguynamedben]

I'm having the same problem @hhubik observed and re-created it in Codepen: http://codepen.io/aguynamedben/pen/KNBNBP

Is tabbing into a Quill instance from a previous form input supposed to work?

[eddieaich]

@aguynamedben @hhubik

I worked around this by adding the following JQuery code after instantiating quill:

var inputTabIndex = $('#first-input').prop('tabindex');
$('.ql-editor').prop('tabindex', parseInt(inputTabIndex) + 1);

The idea is to get the previous input from which you are tabbing from and get its tabindex. Then get the class for the actual editor object which is .ql-editor, and set its tabindex to +1 of the previous input's tabindex.

[p10shinde]

Try this...

delete quill.getModule('keyboard').bindings["9"]