fix scroll to active stats

src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx

@@ -13,7 +13,7 @@ import * as styles from './styles/LeagueStatsList.scss';
 
 export interface ILeagueStatsListProps {
     activePokemonId : POGOProtos.Enums.PokemonId;
-    activePokemonForm : POGOProtos.Enums.Form | null;
+    activePokemonForm : POGOProtos.Enums.Form;
     activeIndividualValues : IIndividualValues;
     leagueStatsList : Array<IStats>;
 
@@ -21,7 +21,11 @@ export interface ILeagueStatsListProps {
 }
 
 interface IState {
+    activePokemonId : POGOProtos.Enums.PokemonId;
+    activePokemonForm : POGOProtos.Enums.Form;
+    listRef : React.RefObject<FixedSizeList>;
     activeIndex : number;
+    hasSetActiveStats : boolean;
     dimensions : {
         width : number;
         height : number;
@@ -34,40 +38,32 @@ interface IRowFactory {
 }
 
 export class LeagueStatsList extends React.Component<ILeagueStatsListProps, IState> {
-    private listRef : React.RefObject<FixedSizeList>;
 
-    constructor(props : ILeagueStatsListProps) {
+    public static getDerivedStateFromProps(nextProps : ILeagueStatsListProps, previousState : IState) {
-        super(props);
+        const nextState : IState = {
-
+            ...previousState,
-        this.state = {
+            activePokemonId: nextProps.activePokemonId,
+            activePokemonForm: nextProps.activePokemonForm,
             activeIndex: -1,
-            dimensions: {
-                width: -1,
-                height: -1,
-            }
         };
-
-        this.listRef = React.createRef();
-    }
-
-    public componentWillReceiveProps(nextProps : ILeagueStatsListProps) {
         const activeIvs = nextProps.activeIndividualValues;
-        if (nextProps.activePokemonId !== this.props.activePokemonId || nextProps.activePokemonForm !== this.props.activePokemonForm) {
+
-            this.setState({ activeIndex: -1 });
+        if (nextProps.activePokemonId !== previousState.activePokemonId || nextProps.activePokemonForm !== previousState.activePokemonForm) {
-            if (this.listRef.current !== null) {
+            if (previousState.listRef.current !== null) {
-                this.listRef.current.scrollToItem(0);
+                previousState.listRef.current.scrollToItem(0);
             }
+
         } else if (activeIvs.level !== null && activeIvs.ivHp !== null && activeIvs.ivAtk !== null && activeIvs.ivDef !== null) {
-            let activeIndex = this.state.activeIndex;
+            let activeIndex = previousState.activeIndex;
             if (activeIndex === -1) {
                 // there is no current index, wich means the user is entering in the IVs by hand
                 // now we will look through the list to see if we can find a match
-                this.props.leagueStatsList.some((stats, index) => {
+                nextProps.leagueStatsList.some((stats, index) => {
                     if (activeIvs.ivHp === stats.ivHp &&
                         activeIvs.ivAtk === stats.ivAtk &&
-                        activeIvs.ivDef === stats.ivDef
+                        activeIvs.ivDef === stats.ivDef &&
+                        activeIvs.level === stats.level
                     ) {
-                        this.setState({ activeIndex: index });
                         activeIndex = index;
                         return true;
                     }
@@ -75,21 +71,39 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
                 });
             }
 
-            if (activeIndex > -1) {
+            if (activeIndex > -1 && !previousState.hasSetActiveStats) {
-                const stateStats = this.props.leagueStatsList[activeIndex];
+                // the current IVs belong to the stats at the active index, so scroll to active stats
-                if (activeIvs.ivHp === stateStats.ivHp && activeIvs.ivAtk === stateStats.ivAtk && activeIvs.ivDef === stateStats.ivDef) {
+                if (previousState.listRef.current !== null) {
-                    // the current IVs belong to the stats at the active index, so scroll to active stats
+                    previousState.listRef.current.scrollToItem(activeIndex, 'center');
-                    if (this.listRef.current !== null) {
-                        this.listRef.current.scrollToItem(activeIndex, 'center');
-                    }
-                } else {
-                    // the current IVs have changed since we last scrolled to the active stats, so unset the active index
-                    this.setState({ activeIndex: -1 });
                 }
             }
-        } else {
+
-            this.setState({ activeIndex: -1 });
+            if (activeIndex === -1) {
+                if (previousState.listRef.current !== null) {
+                    previousState.listRef.current.scrollToItem(0);
+                }
+            }
+
+            nextState.activeIndex = activeIndex;
         }
+
+        return nextState;
+    }
+
+    constructor(props : ILeagueStatsListProps) {
+        super(props);
+
+        this.state = {
+            activePokemonId: POGOProtos.Enums.PokemonId.MISSINGNO,
+            activePokemonForm: POGOProtos.Enums.Form.FORM_UNSET,
+            listRef: React.createRef(),
+            hasSetActiveStats: false,
+            activeIndex: -1,
+            dimensions: {
+                width: -1,
+                height: -1,
+            }
+        };
     }
 
     public render() {
@@ -110,7 +124,7 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
                         ({ measureRef }) => (
                             <div ref={ measureRef }>
                                 <FixedSizeList
-                                    ref={ this.listRef }
+                                    ref={ this.state.listRef }
                                     height={ height }
                                     itemCount={ this.props.leagueStatsList.length }
                                     itemSize={ 35 }
@@ -150,7 +164,10 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
         );
         const onClick = () => {
             this.props.handleActivateLeagueStats(stats);
-            this.setState({ activeIndex: index });
+            this.setState({
+                hasSetActiveStats: true,
+                activeIndex: index
+            });
         };
 
         return (

src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss

@@ -110,7 +110,7 @@
 }
 
 .ivsContainer {
-  flex: 0 2 auto;
+  flex: 0 999 auto;
   display: flex;
   flex-flow: column nowrap;
 

src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss

@@ -11,6 +11,7 @@
     flex: 1 1 auto;
     display: flex;
     padding: 0;
+    overflow: hidden;
 
     & > * {
       width: 100%;