duplication of input

[kicumkicum]

1. focus to textarea
2. enter charectes abc
3. focus to List
4. hide List and focus to another List
5. focus to textarea
6. enter charectes abc, but result aabbcc

I see this behavior in my app vknplayer, after update blessed from 0.0.47 to 0.0.48 What could be the reason?

[chjj]

@kicumkicum, are you using the latest blessed? There was a race condition with binding key listeners on textareas a little while ago, but it was fixed.

[KalenAnson]

I'm also seeing this kind of behavior with Blessed 0.1.7.

If I have two textbox elements, boxOne and boxTwo and define an on('click'... event that does nothing, i.e.:

boxTwo.on('click', function(data) {
  // Nothing
});

If boxOne was focused for input and I now click onto boxTwo, boxTwo does not receive focus and any further typing in boxOne will be duplicated.

Additional calls to a focus() method on another element can cause this input to be quadruplicated.

Not quite sure whats going on here but I will be happy to provide more info.

[kicumkicum]

I use blessed 0.1.81 I have two blessed.list and one blessed.textarea I loging remove listener in readInput and add listener in nextTick. task keys:

• start app - show first list. Hide second list. Show textarea. Focus in textarea
• set focus to first list - 'remove listener', 'add listener', 'remove listener'
• show second list, hide filst list - 'remove listener', 'add listener'
• show first list, hide second list - 'remove listener', 'add listener'
• set focus to textarea - 'add listener'
• result - textarea have two listeners and dubl symbols

[kkirby]

Any update on this?

[m4rky77]

I revert this commit https://github.com/chjj/blessed/commit/b42308c7cc3e544821254a0095082d22b60f5af9 and work for my, but i don't know what i'm doing.

[bradparks]

I'm still getting this issue, and I think it happened because I have multiple controls listening for the escape key on input, and then refocusing a textbox on this happening. When I removed this callback, it stopped happening.

program.key('escape', function() {
  text.focus();
});

blessed 0.1.81

[acunniffe]

In case anyone else has this issue I created a workaround that does not require a fork. You can use this function to add a working inputFocus and inputBlur to a textbox instance. This will cleanup the listeners on blur that cause the duplication.

export function AddBlurToTextBox(textBox, handlers) {
    textBox.inputFocus = () => {
        textBox.inputBlur()
        textBox.addHandlers()
        textBox.focus()
    }

    textBox.addHandlers = () => handlers()

    textBox.inputBlur = () => {
        textBox.removeListener('keypress', textBox.__listener);
        delete textBox.__listener;

        textBox.removeListener('blur', textBox.__done);
        delete textBox.__done;
        textBox.screen.focusPop(textBox)
    }
}

Usage: Note you must add all your handlers to the callback so they can be reattached on focus

AddBlurToTextBox(input, () => {
        input.on('keypress', (ch, key) => {
                 //do something
    })
})

Clearly not ideal -- but I don't want to own this code by forking it

[rajasegar]

For me , removing the explicit focus handler for the textbox and setting the option inputOnFocus: true solves this issue.

[Trackhe]

I have the same Problem. but i use it only for an intro and i destroy after that the screen. after that i use inquirer for questions and dubble input. @acunniffe i dont now but i cant get working your fix for me.

module.exports = ({screen, box, image, bigtext}, callback) => {
    const sc = screen({
        smartCSR: true
    });

    const bx = box({
        parent: sc,
        height: "100%",
        width: "100%",
        optimierung: "cpu",
    });

    sc.append(bx);

    let i = 100;

    let img = image({
        parent: bx,
        top: 0,
        left: i + "%",
        width: "34%",
        height: "100%-14",
        type: "ansi",
        ascii: "density",
        file: __dirname + "/../../img/Mond.png",
    });

    bigtext({
        parent: bx,
        content: "MoonShop",
        top: "100%-14",
        style: {
            fg: "white",
        },
        left:"center",
        align:"center",
        valign:"middle",
    });

    function AddBlurToTextBox(sc, handlers) {
        sc.inputFocus = () => {
            sc.inputBlur();
            sc.addHandlers();
            sc.focus();
        };

        sc.addHandlers = () => handlers();

        sc.inputBlur = () => {
            sc.removeListener("keypress", sc.__listener);
            delete sc.__listener;

            sc.removeListener("blur", sc.__done);
            delete sc.__done;
            sc.screen.focusPop(sc);
        }
    }

    AddBlurToTextBox(sc, () => {

    });

    function intro(){
        if(i > 33){
            i--;
            img.left = i + "%";
            sc.render();
            setTimeout(intro,50);
        } else {
            setTimeout(() => {
                sc.destroy();
                console.clear();
                callback();
            }, 4000);
        }
    }
    intro();
};

[jayk]

For Whatever it's worth, I spent quite a while battling this problem and finally came up with a working solution based on @acunniffe's code. My slightly modified version is below.

function AddBlurToTextBox(textBox, handlers) {
        textBox.inputFocus = () => {
                textBox.inputBlur()
                textBox.addHandlers()
                textBox.focus()
        }

        textBox.addHandlers = () => handlers()

        textBox.inputBlur = () => {
                setImmediate(() => {
                    textBox.removeListener('keypress', textBox.__listener);
                    delete textBox.__listener;

                    textBox.removeListener('blur', textBox.__done);
                    delete textBox.__done;
                });
        }
}

In my code, I just call the inputBlur() in my submit handler. - when the input is focused again it behaves normally.

The issue seems to be that TextArea is adding it's listeners in a nextTick() (which is really setImmediate()) - which means just removing them doesn't work because they don't exist yet. Putting the removal in a setImmediate makes the removal happen after they are actually added. No more key duplication. :)