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:
parent
6493ddce17
commit
8f5936871c
|
@ -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()
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue