diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
index 01580a40a..93a012993 100644
--- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
+++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
@@ -233,7 +233,9 @@ const SingleAutocompleteSelectFieldContent: React.FC<
       <div className={classes.arrowContainer}>
         <div
           className={classNames(classes.arrowInnerContainer, {
-            [classes.hide]: scrolledToBottom && choices.length > 0
+            // Needs to be explicitely compared to false because
+            // scrolledToBottom can be either true, false or undefined
+            [classes.hide]: scrolledToBottom !== false
           })}
         >
           <SVG src={chevronDown} />
diff --git a/src/hooks/useElementScroll.ts b/src/hooks/useElementScroll.ts
index 83392800c..925a8bba4 100644
--- a/src/hooks/useElementScroll.ts
+++ b/src/hooks/useElementScroll.ts
@@ -21,7 +21,7 @@ export function isScrolledToBottom(
   return !!anchor.current && position
     ? position.y + anchor.current.clientHeight + offset >=
         anchor.current.scrollHeight
-    : false;
+    : undefined;
 }
 
 function useElementScroll(anchor: MutableRefObject<HTMLElement>): Position {
@@ -39,6 +39,10 @@ function useElementScroll(anchor: MutableRefObject<HTMLElement>): Position {
     }
   }, [anchor.current]);
 
+  useEffect(() => {
+    setTimeout(() => setScroll(getPosition(anchor.current)), 100);
+  }, []);
+
   return scroll;
 }
 export default useElementScroll;