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

FIX: relies on native focus behavior in chat emoji picker (#21092) 

This codepath was responsible to scroll to the first emoji of a section, however `scrollIntoView` was not super reliable and was also causing the whole page to scroll with drawer. This is also simply not necessary code as native focus behavior will scroll to the element.
This commit is contained in:
Joffrey JAFFEUX 2023-04-13 20:35:13 +02:00 committed by GitHub
parent bd5c5c4b5f
commit 9b3408223b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs
View File

@ -197,7 +197,6 @@
this.chatEmojiReactionStore.diversity this.chatEmojiReactionStore.diversity
}} }}
loading="lazy" loading="lazy"
{{on "focus" this.didFocusFirstEmoji}}
/> />
{{/let}} {{/let}}

18
plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.js
View File

@ -357,14 +357,6 @@ export default class ChatEmojiPicker extends Component {
} }
} }
@action
didFocusFirstEmoji(event) {
event.preventDefault();
const section = event.target.closest(".chat-emoji-picker__section").dataset
.section;
this.didRequestSection(section);
}
@action @action
didRequestSection(section) { didRequestSection(section) {
const scrollableContent = document.querySelector( const scrollableContent = document.querySelector(
@ -388,12 +380,10 @@ export default class ChatEmojiPicker extends Component {
schedule("afterRender", () => { schedule("afterRender", () => {
document document
.querySelector(`.chat-emoji-picker__section[data-section="${section}"]`) .querySelector(
.scrollIntoView({ `.chat-emoji-picker__section[data-section="${section}"] .emoji:nth-child(1)`
behavior: "auto", )
block: "start", .focus();
inline: "start",
});
later(() => { later(() => {
// iOS hack to avoid blank div when requesting section during momentum // iOS hack to avoid blank div when requesting section during momentum

3
plugins/chat/test/javascripts/components/chat-emoji-picker-test.js
View File

@ -128,7 +128,8 @@ module("Discourse Chat | Component | chat-emoji-picker", function (hooks) {
await click(`.chat-emoji-picker__section-btn[data-section="objects"]`); await click(`.chat-emoji-picker__section-btn[data-section="objects"]`);
assert.true( assert.true(
document.querySelector("#ember-testing-container").scrollTop > 0, document.querySelector(".chat-emoji-picker__scrollable-content")
.scrollTop > 0,
"it scrolls to the section" "it scrolls to the section"
); );
}); });