Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: Emoji preview showing incorrect preview on keyboard focus (#20116)

This commit is contained in:
Keegan George 2023-02-01 12:14:34 -08:00 committed by GitHub
parent cb2569303f
commit 41f265ae46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/assets/javascripts/discourse/app/components/emoji-picker.js
View File

@ -211,10 +211,7 @@ export default Component.extend({
return false;
}
this.set(
"hoveredEmoji",
this._codeWithDiversity(event.target.title, this.selectedDiversity)
);
this._updateEmojiPreview(event.target.title);
},
@action
@ -255,15 +252,11 @@ export default Component.extend({
let currentEmoji;
this.set(
"hoveredEmoji",
this._codeWithDiversity(event.target.title, this.selectedDiversity)
);
if (
event.key === "ArrowDown" &&
this._focusedOn(this.elements.searchInput)
) {
this._updateEmojiPreview(emojis[0].title);
emojis[0].focus();
event.preventDefault();
return false;
@ -306,8 +299,10 @@ export default Component.extend({
let nextEmoji = currentEmoji + 1;
if (nextEmoji < emojis.length) {
this._updateEmojiPreview(emojis[nextEmoji].title);
emojis[nextEmoji].focus();
} else if (nextEmoji >= emojis.length) {
this._updateEmojiPreview(emojis[0].title);
emojis[0].focus();
}
}
@ -315,6 +310,7 @@ export default Component.extend({
if (event.key === "ArrowLeft") {
const previousEmoji = currentEmoji - 1;
if (currentEmoji > 0) {
this._updateEmojiPreview(emojis[previousEmoji].title);
emojis[previousEmoji].focus();
}
}
@ -329,7 +325,7 @@ export default Component.extend({
const emojiBelow = [...emojis]
.filter((c) => c.offsetTop > active.offsetTop)
.find((c) => c.offsetLeft === active.offsetLeft);
this._updateEmojiPreview(emojiBelow.title);
emojiBelow?.focus();
}
@ -343,8 +339,10 @@ export default Component.extend({
.find((c) => c.offsetLeft === active.offsetLeft);
if (emojiAbove) {
this._updateEmojiPreview(emojiAbove.title);
emojiAbove.focus();
} else {
this.set("hoveredEmoji", null);
document.querySelector(this.elements.searchInput).focus();
}
}
@ -467,6 +465,13 @@ export default Component.extend({
);
},
_updateEmojiPreview(title) {
return this.set(
"hoveredEmoji",
this._codeWithDiversity(title, this.selectedDiversity)
);
},
@bind
handleOutsideClick(event) {
const emojiPicker = document.querySelector(".emoji-picker");