IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

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