Help with keyboardControls

[SoftBoil]

Hello, I'm starting to learn Deno and TUI. I'm starting with a simple program:

import {
  Computed,
  handleInput,
  handleKeyboardControls,
  handleMouseControls,
  Signal,
  Tui,
  VerticalLayout,
} from "https://deno.land/x/[email protected]/mod.ts";
import {
  Button
} from "https://deno.land/x/[email protected]/src/components/mod.ts";
import { crayon } from "https://deno.land/x/[email protected]/mod.ts";

const tui = new Tui({ style: crayon.bgBlack, refreshRate: 1000 / 60 });
handleInput(tui);
handleKeyboardControls(tui);
handleMouseControls(tui);

tui.dispatch();
tui.run();

const layout = new VerticalLayout({
  pattern: ["0", "1", "2"],
  rectangle: {
    column: 1, row: 1, height: 10, width: 20,
  },
  gapY: 1,
});

for (let buttonIdx = 0; buttonIdx < 3; buttonIdx++) {
  const counter = new Signal(buttonIdx);
  new Button({
    parent: tui,
    zIndex: 0,
    label: {
      text: new Computed(() => `C${buttonIdx}: ${counter.value}`),
    },
    theme: {
      base: crayon.bgGreen,
      focused: crayon.bgBlue,
      active: crayon.bgYellow,
    },
    rectangle: layout.element(buttonIdx.toString() as '1'|'2'|'0'),
  }).state.subscribe((state) => {
    if (state === "active") {
      counter.value++;
    }
  });
}

Mouse handling works fine but keyboard controls don't seem to be doing anything.
I'm expecting default handling: TAB to switch focus between 3 the buttons, and to ENTER to activate the focused button.

[Im-Beast]

Hi, Tui 2's default keyboard controls are Ctrl+arrows to switch between the components and Enter to activate currently focused component.

I don't really remember why i went with that choice of controls, so if you don't like that feel free to look at controls.ts and create your own keyboard controls.

[SoftBoil]

Thank you for your help. I don't know if it's a MacOSX Terminal specific problem but CTRL-arrows was not triggering keyPress at all. "tab" worked but shift-TAB translated into another string. I ended up writing a handler that uses "up" and "down":

// Custom handleKeyboardControls
let focusIdx: number = -1;
tui.on("keyPress", ({ key, ctrl, shift, meta }) => {
    if (ctrl || shift || meta) return;

    const components = tui.components;
    const interactableComponents = Array.from(components).filter(component => isInteractable(component));
    if (interactableComponents.length === 0) return;

    if (key === 'return') {
        interactableComponents[focusIdx].state.value = "active";
        interactableComponents[focusIdx].state.value = "focused";
        return;
    }

    if (key === "up" || key === "down") {
        if (key === "down") {
            if (focusIdx < 0 || (focusIdx >= interactableComponents.length - 1)) {
                focusIdx = 0;
            } else {
                focusIdx++;
            }
        } else {
            if (focusIdx <= 0) {
                focusIdx = interactableComponents.length - 1;
            } else {
                focusIdx--;
            }
        }
        // Update state of every interactable component
        interactableComponents.forEach((component, idx) => {
            component.state.value = idx === focusIdx ? "focused" : "base";
        })
    }
});

[Im-Beast]

It actually might be a macOS-specific thing about how its inputs are passed to the terminal with modifiers, I will check on it tommorow and give you a response. Nothing wrong with using up/down or tab/shift+tab though, if you feel that's good enough for you feel free to mark this as answered :p