How to simulate typing on contenteditable div?

Question

Following to my question at this thread, now I'm stuck with a problem on how to simulate typing in a contenteditable div.

The div tag is like below:

<div tabindex="-1" class="input-emoji">
    <div class="input-placeholder" style="visibility: visible;">Type a message</div>
    <div class="input" contenteditable="true" data-tab="1" dir="auto" spellcheck="true"></div>
</div>

And in order to simulate typing, my code in js is like below:

setTimeout(() => {
    try {
        let inputContainerEl = chatPanelEl[0].getElementsByClassName('input-container');
        let input = inputContainerEl[0].getElementsByClassName('input');

        let message = 'Something to type';
        console.log('MESSAGE: ' + message);
        let chars = message.split('');
        for (let n = 0; n < chars.length; n++) {
            let charCode = chars[n].charCodeAt(0);
            console.log('CHAR: ' + chars[n] + ' => CODE: ' + charCode);

            let keypressEvent = document.createEvent('KeyboardEvent');
            keypressEvent.initKeyboardEvent('keypress', true, true, window, false, false, false, false, charCode, charCode);
            input[0].dispatchEvent(keypressEvent);

            let keydownEvent = document.createEvent('KeyboardEvent');
            keydownEvent.initKeyboardEvent('keydown', true, true, window, false, false, false, false, charCode, charCode);
            input[0].dispatchEvent(keydownEvent);

            let keyupEvent = document.createEvent('KeyboardEvent');
            keyupEvent.initKeyboardEvent('keyup', true, true, window, false, false, false, false, charCode, charCode);
            input[0].dispatchEvent(keyupEvent);
        }
    } catch(err) {
        console.log('ERROR: ' + err);
    }
}, 1000);

I checked some threads here already, regarding performing keydown, keypress and keyup events from vanilla javascript. But nothing seems to works.

I tried using selenium based solution and it works like charm (read the code below)

public void run() {
    try {
        WebElement container = driver.findElement(By.className("input-container"));
        if (container != null) {
            WebElement input = container.findElement(By.className("input"));
            if (input != null) {
                input.sendKeys("ECHO: " + this.echo);
                Thread.sleep(2000);
                WebElement submitBtn = driver.findElement(By.className("compose-btn-send"));
                if (submitBtn != null) {
                    submitBtn.click();
                }
            }
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
}

But since I'm not able to use selenium (due to project's requirement), I'm forced to use Cefsharp instead.

So if anybody knows on how to perform selenium "sendKeys" method in vanilla javascript, please help me.

Thanks.

Answer 1

This solution works for me:

element.dispatchEvent(new InputEvent('textInput', {data: keyChar, bubbles: true}));

where element is contenteditable div and keyChar is of course key character ;)