diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx index 975e66f36..c43243c32 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx @@ -26,7 +26,7 @@ const offset = 24; export type ChoiceValue = string; export interface SingleAutocompleteChoiceType< V extends ChoiceValue = ChoiceValue, - L = string + L = string, > { label: L; value: V; @@ -137,7 +137,9 @@ function getChoiceIndex( const sliceSize = 20; -const SingleAutocompleteSelectFieldContent: React.FC = props => { +const SingleAutocompleteSelectFieldContent: React.FC< + SingleAutocompleteSelectFieldContentProps +> = props => { const { add, choices, @@ -179,13 +181,16 @@ const SingleAutocompleteSelectFieldContent: React.FC { if (anchor.current?.scrollTo && !initialized) { anchor.current.scrollTo({ top: 0, }); setInitialized(true); } - }, [choices?.length]); + }, [initialized]); React.useEffect(() => { setInitialized(false); @@ -280,7 +285,7 @@ const SingleAutocompleteSelectFieldContent: React.FC { - fetchMore({ - variables: { + loadMore( + (prev, next) => { + if ( + prev.taxClasses.pageInfo.endCursor === + next.taxClasses.pageInfo.endCursor + ) { + return prev; + } + + return { + ...prev, + taxClasses: { + ...prev.taxClasses, + edges: [...prev.taxClasses.edges, ...next.taxClasses.edges], + pageInfo: next.taxClasses.pageInfo, + }, + }; + }, + { + ...variables, after: data?.taxClasses?.pageInfo?.endCursor, }, - }); + ); }, };