FIX: prevents arrow keys to bubble into parents components (#19000)

ember-template-link doesn’t recommend keydown, but listening on keyup won't work to prevent the scroll of the container
This commit is contained in:
Joffrey JAFFEUX 2022-11-14 16:53:22 +01:00 committed by GitHub
parent 6493ddce17
commit 8f5936871c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 7 deletions

View File

@ -86,10 +86,14 @@ export default class ChatEmojiPicker extends Component {
}
@action
didPressEscape(event) {
trapKeyUpEvents(event) {
if (event.key === "Escape") {
this.chatEmojiPickerManager.close();
}
if (event.key === "ArrowUp") {
event.stopPropagation();
}
}
@action
@ -220,10 +224,6 @@ export default class ChatEmojiPicker extends Component {
@action
didNavigateSection(event) {
if (event.type !== "keyup") {
return;
}
const sectionEmojis = [
...event.target
.closest(".chat-emoji-picker__section")
@ -252,6 +252,7 @@ export default class ChatEmojiPicker extends Component {
if (event.key === "ArrowDown") {
event.preventDefault();
event.stopPropagation();
sectionEmojis
.filter((c) => c.offsetTop > event.target.offsetTop)
@ -261,6 +262,7 @@ export default class ChatEmojiPicker extends Component {
if (event.key === "ArrowUp") {
event.preventDefault();
event.stopPropagation();
sectionEmojis
.reverse()

View File

@ -1,5 +1,6 @@
{{!-- template-lint-disable no-invalid-interactive --}}
{{!-- template-lint-disable no-nested-interactive --}}
{{!-- template-lint-disable no-down-event-binding --}}
<div
class={{concat-class
"chat-emoji-picker"
@ -7,7 +8,7 @@
}}
{{did-insert this.addClickOutsideEventListener}}
{{will-destroy this.removeClickOutsideEventListener}}
{{on "keyup" this.didPressEscape}}
{{on "keydown" this.trapKeyUpEvents}}
>
<div class="chat-emoji-picker__filter-container">
<DcFilterInput
@ -150,7 +151,7 @@
(concat "chat.emoji_picker." section)
translatedFallback=section
}}
{{on "keyup" this.didNavigateSection}}
{{on "keydown" this.didNavigateSection}}
>
<h2 class="chat-emoji-picker__section-title">
{{i18n