retort limited emoji set is OFF, then it pops up with the standard emoji picker (you know, the one that pops up when writing a reply).
retort limited emoji set on ON, then it causes this problem, obviously because the wrapper is missing a few DOM panels inside and the buttons got spread directly by the flexbox.
As it happens, the code in
retort-picker.js.es6 defers to the standard emoji picker if
retort limited emoji set is OFF, which explains the current bahavior. However, if
retort limited emoji set is ON, then somehow the standard emoji picker still gets shown, instead of retort emoji picker (which has all the relevant buttons created correctly). So, in other words,
this._bindEmojiClick($picker); is not having the desired effect.
There are two emoji pickers on the page: the standard emoji picker, and the retort emoji picker. The both have the class
emoji-picker. I am quite sure that the line
const $picker = $('.emoji-picker') is not correct, since it will return both pickers (when you only want the retort emoji picker). As a result, both the retort emoji picker and the standard emoji picker got buttons created underneath, if
retort limited emoji set on ON.
And the critical line
this._bindEmojiClick($picker); binds the click to two pickers, which probably means the last one wins (i.e. the standard emoji picker, which is located below the retort emoji picker).
I am quite sure the correct code should be:
const $picker = $('.retort-picker.emoji-picker')
I suspect nobody here limits the emoji’s to a list?