From 64a7a2aac28f7a37b4d75e800e9931ff275b603c Mon Sep 17 00:00:00 2001 From: Martin Brennan Date: Thu, 22 Dec 2022 17:01:51 +1000 Subject: [PATCH] FIX: Autocomplete arrow scroll for mention (#19571) Follow up to 8820e9418a4b4f89a9cf06a97fe5bcf10724c9a2, only the hashtag autocomplete has a fadeout scroll, so we still need to scroll on the original div in some cases (e.g. mentions) --- .../javascripts/discourse/app/lib/autocomplete.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/discourse/app/lib/autocomplete.js b/app/assets/javascripts/discourse/app/lib/autocomplete.js index 4ec555aad2a..47e5802dba6 100644 --- a/app/assets/javascripts/discourse/app/lib/autocomplete.js +++ b/app/assets/javascripts/discourse/app/lib/autocomplete.js @@ -119,28 +119,28 @@ export default function (options) { } function scrollAutocomplete() { - if (!fadeoutDiv) { + if (!fadeoutDiv && !div) { return; } - const fadeoutDivElement = fadeoutDiv[0]; + const scrollingDivElement = fadeoutDiv?.length > 0 ? fadeoutDiv[0] : div[0]; const selectedElement = getSelectedOptionElement(); const selectedElementTop = selectedElement.offsetTop; const selectedElementBottom = selectedElementTop + selectedElement.clientHeight; // the top of the item is above the top of the fadeoutDiv, so scroll UP - if (selectedElementTop <= fadeoutDivElement.scrollTop) { - fadeoutDivElement.scrollTo(0, selectedElementTop); + if (selectedElementTop <= scrollingDivElement.scrollTop) { + scrollingDivElement.scrollTo(0, selectedElementTop); // the bottom of the item is below the bottom of the div, so scroll DOWN } else if ( selectedElementBottom >= - fadeoutDivElement.scrollTop + fadeoutDivElement.clientHeight + scrollingDivElement.scrollTop + scrollingDivElement.clientHeight ) { - fadeoutDivElement.scrollTo( + scrollingDivElement.scrollTo( 0, - fadeoutDivElement.scrollTop + selectedElement.clientHeight + scrollingDivElement.scrollTop + selectedElement.clientHeight ); } }