Fix avatar editor scrolling

src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { AvatarEditorGridPartItem, GetConfiguration } from '../../../../api';
 import { LayoutCurrencyIcon, LayoutGridItem, LayoutGridItemProps } from '../../../../common';
 import { AvatarEditorIcon } from '../AvatarEditorIcon';
@@ -15,20 +15,14 @@ export const AvatarEditorFigureSetItemView: FC<AvatarEditorFigureSetItemViewProp
 
     const hcDisabled = GetConfiguration<boolean>('hc.disabled', false);
 
-    const rerender = useCallback(() =>
-    {
-        setUpdateId(prevValue => (prevValue + 1));
-    }, []);
-
     useEffect(() =>
     {
+        const rerender = () => setUpdateId(prevValue => (prevValue + 1));
+
         partItem.notify = rerender;
 
-        return () =>
+        return () => partItem.notify = null;
-        {
+    }, [ partItem ]);
-            partItem.notify = null;
-        }
-    }, [ partItem, rerender ]);
 
     return (
         <LayoutGridItem itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } itemActive={ partItem.isSelected } { ...rest }>

src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction, useCallback } from 'react';
+import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from 'react';
 import { AvatarEditorGridPartItem, CategoryData, IAvatarEditorCategoryModel } from '../../../../api';
 import { AutoGrid } from '../../../../common';
 import { AvatarEditorFigureSetItemView } from './AvatarEditorFigureSetItemView';
@@ -13,6 +13,7 @@ export interface AvatarEditorFigureSetViewProps
 export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = props =>
 {
     const { model = null, category = null, setMaxPaletteCount = null } = props;
+    const elementRef = useRef<HTMLDivElement>(null);
 
     const selectPart = useCallback((item: AvatarEditorGridPartItem) =>
     {
@@ -27,8 +28,15 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
         setMaxPaletteCount(partItem.maxColorIndex || 1);
     }, [ model, category, setMaxPaletteCount ]);
 
+    useEffect(() =>
+    {
+        if(!model || !category || !elementRef || !elementRef.current) return;
+
+        elementRef.current.scrollTop = 0;
+    }, [ model, category ]);
+
     return (
-        <AutoGrid columnCount={ 3 } columnMinHeight={ 50 }>
+        <AutoGrid innerRef={ elementRef } columnCount={ 3 } columnMinHeight={ 50 }>
             { (category.parts.length > 0) && category.parts.map((item, index) =>
                 <AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ event => selectPart(item) } />) }
         </AutoGrid>

src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetItemView.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { AvatarEditorGridColorItem, GetConfiguration } from '../../../../api';
 import { LayoutCurrencyIcon, LayoutGridItem, LayoutGridItemProps } from '../../../../common';
 
@@ -14,17 +14,14 @@ export const AvatarEditorPaletteSetItem: FC<AvatarEditorPaletteSetItemProps> = p
 
     const hcDisabled = GetConfiguration<boolean>('hc.disabled', false);
 
-    const rerender = useCallback(() =>
-    {
-        setUpdateId(prevValue => (prevValue + 1));
-    }, []);
-
     useEffect(() =>
     {
+        const rerender = () => setUpdateId(prevValue => (prevValue + 1));
+
         colorItem.notify = rerender;
 
         return () => colorItem.notify = null;
-    });
+    }, [ colorItem ]);
 
     return (
         <LayoutGridItem itemHighlight itemColor={ colorItem.color } itemActive={ colorItem.isSelected } className="clear-bg" { ...rest }>

src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback } from 'react';
+import { FC, useCallback, useEffect, useRef } from 'react';
 import { AvatarEditorGridColorItem, CategoryData, IAvatarEditorCategoryModel } from '../../../../api';
 import { AutoGrid } from '../../../../common';
 import { AvatarEditorPaletteSetItem } from './AvatarEditorPaletteSetItemView';
@@ -14,6 +14,7 @@ export interface AvatarEditorPaletteSetViewProps
 export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = props =>
 {
     const { model = null, category = null, paletteSet = [], paletteIndex = -1 } = props;
+    const elementRef = useRef<HTMLDivElement>(null);
 
     const selectColor = useCallback((item: AvatarEditorGridColorItem) =>
     {
@@ -24,8 +25,15 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
         model.selectColor(category.name, index, paletteIndex);
     }, [ model, category, paletteSet, paletteIndex ]);
 
+    useEffect(() =>
+    {
+        if(!model || !category || !elementRef || !elementRef.current) return;
+
+        elementRef.current.scrollTop = 0;
+    }, [ model, category ]);
+
     return (
-        <AutoGrid gap={ 1 } columnCount={ 5 } columnMinWidth={ 30 }>
+        <AutoGrid innerRef={ elementRef } gap={ 1 } columnCount={ 5 } columnMinWidth={ 30 }>
             { (paletteSet.length > 0) && paletteSet.map((item, index) =>
                 <AvatarEditorPaletteSetItem key={ index } colorItem={ item } onClick={ event => selectColor(item) } />) }
         </AutoGrid>