cronvel / terminal-kit

Terminal utilities for node.js
MIT License
3.08k stars 198 forks source link

Click on a non-focused Column Menu could not update the menu title #220

Open benlau opened 1 year ago

benlau commented 1 year ago

Hello,

I would like to update the content of a menu item inside the ColumnMenu on mouse click using the ColumnMenu.setItem function.

However, I find that it doesn't work if the ColumnMenu don't even have a focus. Here is the code:

(Remarks: Terminal-kit version: 3.0.0)

const termkit = require("terminal-kit");
const term = require("terminal-kit").terminal;

const document = term.createDocument();

const items = [
    { content: "Item 1       ", key: "1", value:"1" },
    { content: "Item 2       ", key: "2", value:"2" },
]

const columnMenu = new termkit.ColumnMenu({
    parent: document,
    x: 0,
    y: 0,
    items,
});

columnMenu.on("submit", (key) => {
    columnMenu.setItem(key, {content: "Pressed item"});
});

term.on("key", (key) => {
    if (key === "ESCAPE") {
        process.exit(0);
    }
});

After launched the program, it will show a column menu :

Item 1
Item 2

If you trigger a submit event, it should update the submitted menu item's title to "Pressed item".

However, if I click on the item by mouse just after launched, it will trigger the blink effect and submit event but the menu title won't be updated.

Did I do something wrong or it is a bug?

The problem will gone if I call document.giveFocusTo(columnMenu) but it is not an ideal solution as I have another input component with default focus. Currently, I solve this problem by a dirty hack of switching focus:

document.giveFocusTo(columnMenu);
setTimeout(() => {
   document.giveFocusTo(textInput); // The input component with default focus.
}, 0);