Tab button not working when adding commands

JupyterLab
1

I’m trying to use a key to trigger a command with app.commmands.addKeyBinding. Other keys work but Tab doesn’t. I need to use tab though. Can anyone help? Thanks.

2

It is hard to help without much more details/a reproducible example. It works well in the snippet below (which you can copy-paste into GitHub - jupyterlab/jupyterlab-plugin-playground: A dynamic extension loader for JupyterLab):

import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
import { ICommandPalette } from '@jupyterlab/apputils';

namespace CommandIDs {
    export const testCommand = 'command:test';
}

const plugin: JupyterFrontEndPlugin<void> = {
  id: 'hello-world:plugin',
  autoStart: true,
  requires: [ICommandPalette],
  activate: (app: JupyterFrontEnd, palette: ICommandPalette) => {
      let body = document.getElementsByTagName("body")[0];
      let completerWidget = document.createElement('textarea');
      completerWidget.className = 'jp-Completing';
      completerWidget.style.position = 'absolute';
      completerWidget.style.top = '0px';
      completerWidget.style.right = '0px';
      completerWidget.style.zIndex = '10000';
      completerWidget.style.width = '100px';
      completerWidget.style.height = '100px';
      completerWidget.style.background = 'white';
      body.appendChild(completerWidget);
      if (!app.commands.hasCommand(CommandIDs.testCommand)) {
          app.commands.addCommand(CommandIDs.testCommand, {
            execute: () => {
              console.log("test command has been triggered");
            },
          });
      }

      app.commands.addKeyBinding({
        command: CommandIDs.testCommand,
        keys: ['Tab'],
        selector: ".jp-Completing",
      });

  },
};

export default plugin;
1 Like