Fix infinite spinner during tax selection (#3397)

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<SingleAutocompleteSelectFieldContentProps> = props => {
+const SingleAutocompleteSelectFieldContent: React.FC<
+  SingleAutocompleteSelectFieldContentProps
+> = props => {
   const {
     add,
     choices,
@@ -179,13 +181,16 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
     if (!onFetchMore) {
       setSlice(sliceSize);
     }
+  }, [choices?.length]);
+
+  React.useEffect(() => {
     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<SingleAutocompleteSelectFie
               );
               const key = React.isValidElement(suggestion.label)
                 ? `${index}${suggestion.value}${
-                    ((suggestion as unknown) as ReactElement).props
+                    (suggestion as unknown as ReactElement).props
                   }`
                 : JSON.stringify(suggestion);
 

src/taxes/utils/useTaxClassFetchMore.ts

@@ -18,21 +18,40 @@ interface UseTaxClassFetchMoreHookResult {
  * @returns fetchMore - props for paginated components, e.g. dropdowns
  */
 export function useTaxClassFetchMore(): UseTaxClassFetchMoreHookResult {
-  const { data, loading, fetchMore } = useTaxClassAssignQuery({
+  const { data, loading, loadMore, variables } = useTaxClassAssignQuery({
     variables: {
-      first: 20,
+      first: 10,
     },
   });
+
   const taxClasses = mapEdgesToItems(data?.taxClasses);
   const fetchMoreTaxClasses = {
     hasMore: data?.taxClasses?.pageInfo?.hasNextPage,
     loading,
     onFetchMore: () => {
-      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,
         },
-      });
+      );
     },
   };