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

FIX: Hashtag autocomplete scrolling arrow keys with fadeout (#19541) 

Follow-up to 8db1f1892d,
this makes the hashtag autocomplete scrolling with arrow
keys work with the new fadeout element that is now used
for the scroll container.
This commit is contained in:
Martin Brennan 2022-12-21 15:15:02 +10:00 committed by GitHub
parent e15b382666
commit 8820e9418a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/assets/javascripts/discourse/app/lib/autocomplete.js
View File

@ -94,6 +94,7 @@ export default function (options) {
let completeEnd = null; let completeEnd = null;
let me = this; let me = this;
let div = null; let div = null;
let fadeoutDiv = null;
let prevTerm = null; let prevTerm = null;
// By default, when the autocomplete popup is rendered it has the // By default, when the autocomplete popup is rendered it has the
@ -118,28 +119,28 @@ export default function (options) {
} }
function scrollAutocomplete() { function scrollAutocomplete() {
if (!div) { if (!fadeoutDiv) {
return; return;
} }
const divElement = div[0]; const fadeoutDivElement = fadeoutDiv[0];
const selectedElement = getSelectedOptionElement(); const selectedElement = getSelectedOptionElement();
const selectedElementTop = selectedElement.offsetTop; const selectedElementTop = selectedElement.offsetTop;
const selectedElementBottom = const selectedElementBottom =
selectedElementTop + selectedElement.clientHeight; selectedElementTop + selectedElement.clientHeight;
// the top of the item is above the top of the div, so scroll UP // the top of the item is above the top of the fadeoutDiv, so scroll UP
if (selectedElementTop <= divElement.scrollTop) { if (selectedElementTop <= fadeoutDivElement.scrollTop) {
divElement.scrollTo(0, selectedElementTop); fadeoutDivElement.scrollTo(0, selectedElementTop);
// the bottom of the item is below the bottom of the div, so scroll DOWN // the bottom of the item is below the bottom of the div, so scroll DOWN
} else if ( } else if (
selectedElementBottom >= selectedElementBottom >=
divElement.scrollTop + divElement.clientHeight fadeoutDivElement.scrollTop + fadeoutDivElement.clientHeight
) { ) {
divElement.scrollTo( fadeoutDivElement.scrollTo(
0, 0,
divElement.scrollTop + selectedElement.clientHeight fadeoutDivElement.scrollTop + selectedElement.clientHeight
); );
} }
} }
@ -151,6 +152,7 @@ export default function (options) {
div.hide().remove(); div.hide().remove();
} }
div = null; div = null;
fadeoutDiv = null;
completeStart = null; completeStart = null;
autocompleteOptions = null; autocompleteOptions = null;
prevTerm = null; prevTerm = null;
@ -448,6 +450,8 @@ export default function (options) {
top: mePos.top + pos.top - vOffset + borderTop + "px", top: mePos.top + pos.top - vOffset + borderTop + "px",
left: left + "px", left: left + "px",
}); });
fadeoutDiv = div.find(".hashtag-autocomplete__fadeout");
} }
function dataSource(term, opts) { function dataSource(term, opts) {