diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx index 9a6794d65..319458a87 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx @@ -124,6 +124,8 @@ function getChoiceIndex( return choiceIndex; } +const sliceSize = 20; + const SingleAutocompleteSelectFieldContent: React.FC = props => { const { add, @@ -147,6 +149,7 @@ const SingleAutocompleteSelectFieldContent: React.FC(); const scrollPosition = useElementScroll(anchor); const [calledForMore, setCalledForMore] = React.useState(false); + const [slice, setSlice] = React.useState(sliceSize); const scrolledToBottom = isScrolledToBottom(anchor, scrollPosition, offset); @@ -154,9 +157,18 @@ const SingleAutocompleteSelectFieldContent: React.FC slice + sliceSize); } }, [scrolledToBottom]); + React.useEffect(() => { + setSlice(sliceSize); + anchor.current.scrollTo({ + top: 0 + }); + }, [choices?.length]); + React.useEffect(() => { if (calledForMore && !loading) { setCalledForMore(false); @@ -219,7 +231,7 @@ const SingleAutocompleteSelectFieldContent: React.FC 0 && (!!add || displayCustomValue) && (
)} - {choices.map((suggestion, index) => { + {choices.slice(0, slice).map((suggestion, index) => { const choiceIndex = getChoiceIndex( index, emptyOption,