diff --git a/web_src/js/features/comp/TextExpander.js b/web_src/js/features/comp/TextExpander.js index 128a2ddff0e4d..1f6992096224d 100644 --- a/web_src/js/features/comp/TextExpander.js +++ b/web_src/js/features/comp/TextExpander.js @@ -1,6 +1,17 @@ import {matchEmoji, matchMention} from '../../utils/match.js'; import {emojiString} from '../emoji.js'; +function userFriendlyScrollBehavior(el) { + // the TextExpander uses ComboboxNav, which uses scrollIntoView to scroll to the selected item. + // but their default behavior uses undefined (aka "start"), which annoys the end users a lot. + // if upstream could fix it, our code could be removed then. https://github.com/github/text-expander-element/issues/50 + const oldScrollIntoView = el.scrollIntoView; + el.scrollIntoView = function (opts) { + opts = opts || {block: 'nearest', inline: 'nearest'}; + oldScrollIntoView.call(this, opts); + }; +} + export function initTextExpander(expander) { expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => { if (key === ':') { @@ -15,6 +26,7 @@ export function initTextExpander(expander) { li.setAttribute('role', 'option'); li.setAttribute('data-value', emoji); li.textContent = `${emoji} ${name}`; + userFriendlyScrollBehavior(li); ul.append(li); } @@ -45,6 +57,7 @@ export function initTextExpander(expander) { li.append(fullnameSpan); } + userFriendlyScrollBehavior(li); ul.append(li); }