Inserting emoji using OS X character picker causes composer to lose focus

[dbkr]

Press ctrl+cmd+space to bring up the character picker, insert any character. Message composer loses the focus.

[lampholder]

天啊现在我的电脑说的中文。

That's better. Despite messing up the keyboard chording and somehow switching input to Chinese, I didn't experience this issue with the mac character picker. I'm on High Sierra 10.13.6 (17G65) and Riot Electron 0.16.

Either clicking or using the keyboard, both left the cursor in the composer.

[aaronraimist]

@lampholder I can reproduce this in Chrome. In Safari, it loses focus and doesn't even type the emoji (if it is the first character) on /develop. Possibly related to updating slate?

[dbkr]

#7472 has some diagnosis on this (I failed to find the original bug I filed). It happened for me both before an and after updating slate.

[lampholder]

Gnh, I can now repro this on Electron and on Chrome, and I've noticed something else on Firefox - following the same repro steps you get two emoji in the composer, a native one and a emojione one.

[lampholder]

Useful stuff from @dbkr's second filing of this bug (#7472):

Composer loses focus after typing emoji ...if it's the first character you type in the composer.

I'm using the OS X emoji picker here: unsure if there's a way to repro it on other platforms. Focus composer, ctrl+cmd+space, pick an emoji, emoji goes into composer, press another letter, nothing happens. If you press space, you get a space and can carry on typing.

Having looked into this a little, the selection in the DOM is moving to the sticker button in the time between the composer's componentDidUpdate and a setTimeout(,0) in componentDidUpdate.

componentDidUpdate() {
        console.log("i dun updated");
        const s = window.getSelection();
        console.log("selection anchor: ", s.anchorNode); // <-- prints the last text node in composer
        setTimeout(function() {
            console.log("selection anchor: ", s.anchorNode); <-- prints sticker button
        }, 0);
    }

More interestingly, I can repro this on the slatejs.org examples if I edit the HTML to put <div>hello</div> right after the content-editable div.

Edit: and conversely, if I remove everything after the composer in Riot (ie. the composer buttons and the members panel) I don't get the bug.