0

Using this question How to map a key TAB within a text area I tried to write onTab event this way

_onTab(e) {
    e.preventDefault();
    const maxDepth = 4;
    this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth));
  }
...
<div className={className} onClick={this.focus} >
          <Editor
            ref={this.setDomEditorRef}
            onTab={this.onTab}
            blockStyleFn={getBlockStyle}
            customStyleMap={styleMap}
            editorState={editorState}
            handleKeyCommand={this.handleKeyCommand}
            plugins={[styleToPropsPlugin]}
            onChange={this.onChange}
            placeholder="..."
            
            spellCheck={true}
          />
        </div>

This code doesn't work with TAB key. I tried to do it another way

_mapKeyToEditorCommand(e) {
    
    if (e.keyCode === 9 /* TAB */) {
      e.preventDefault()
      const newEditorState = RichUtils.onTab(
       
        this.state.editorState,
        4, /* maxDepth */

      );
      if (newEditorState !== this.state.editorState) {
        this.onChange(newEditorState);
      }
      return;
    }
    return getDefaultKeyBinding(e);
  }
...
<div className={className} onClick={this.focus} >
          <Editor
            ref={this.setDomEditorRef}
            onTab={this.mapKeyToEditorCommand}
            blockStyleFn={getBlockStyle}
            customStyleMap={styleMap}
            editorState={editorState}
            handleKeyCommand={this.handleKeyCommand}
            onChange={this.onChange}
            plugins={[styleToPropsPlugin]}
            placeholder="..."
            
            spellCheck={true}
          />
        </div>

0 effect. Even when I delete this line in Editor field

onTab={this.mapKeyToEditorCommand}

My editor is just not using any of the code that I wrote to map TAB key. I know it recognises that I am clicking TAB, with this line of code

onTab={this._mapKeyToEditorCommand}

It throws an error only after I press TAB. I can't really find any solution, onFocus and onTab are just not working with TAB key in browser for me. When I click TAB I dont want browser to switch focus, I want it to insert a TAB character (/t) in a text field, like in this editor https://texteditor.co/. So I know this is possible.

Grt
  • 11
  • 2

0 Answers0