scroll selected mon into view

dist/main-bundle.js

@@ -38659,27 +38659,28 @@ function (_react_1$default$Comp) {
 
     _this.handleChangeFilter = function (event) {
       _this.props.handleChangeFilter(event.currentTarget.value).then(function () {
-        if (_this.listRef.current !== null) {
+        if (_this.state.listRef.current !== null) {
-          _this.listRef.current.resetAfterIndex(0, true);
+          _this.state.listRef.current.resetAfterIndex(0, true);
         }
       });
     };
 
     _this.handleClickClearFilter = function () {
       _this.props.handleChangeFilter('').then(function () {
-        if (_this.listRef.current !== null) {
+        if (_this.state.listRef.current !== null) {
-          _this.listRef.current.resetAfterIndex(0, true);
+          _this.state.listRef.current.resetAfterIndex(0, true);
         }
       });
     };
 
     _this.state = {
+      isListOpen: false,
+      listRef: react_1.default.createRef(),
       dimensions: {
         width: -1,
         height: -1
       }
     };
-    _this.listRef = react_1.default.createRef();
     _this.activatePokemonClickHandlers = new Map();
     return _this;
   }
@@ -38733,7 +38734,7 @@ function (_react_1$default$Comp) {
         return react_1.default.createElement("div", {
           ref: measureRef
         }, react_1.default.createElement(react_window_1.VariableSizeList, {
-          ref: _this2.listRef,
+          ref: _this2.state.listRef,
           height: height,
           itemKey: _this2.getListItemKey,
           itemCount: listLength,
@@ -38784,6 +38785,37 @@ function (_react_1$default$Comp) {
         className: formCss
       }, formatter_1.formatForm(pokemon.form), " Form"));
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, previousState) {
+      var wasOpen = previousState.isListOpen;
+      var isOpen = nextProps.isListOpen;
+      var listCurrent = previousState.listRef.current;
+
+      if (isOpen && !wasOpen) {
+        if (listCurrent !== null) {
+          var pokemonIndex = -1;
+          nextProps.pokemonList.some(function (pokemon, index) {
+            if (pokemon.id === nextProps.activePokemonId && pokemon.form === nextProps.activePokemonForm) {
+              pokemonIndex = index;
+              return true;
+            }
+
+            return false;
+          });
+
+          if (pokemonIndex >= 0) {
+            setTimeout(function () {
+              return listCurrent.scrollToItem(pokemonIndex, 'center');
+            }, 0);
+          }
+        }
+      }
+
+      return {
+        isListOpen: isOpen && listCurrent !== null
+      };
+    }
   }]);
 
   return PokemonSelectList;

src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx

@@ -27,6 +27,8 @@ export interface IPokemonSelectListProps {
 }
 
 interface IState {
+    isListOpen : boolean;
+    listRef : React.RefObject<VariableSizeList>;
     dimensions : {
         width : number;
         height : number;
@@ -39,20 +41,47 @@ interface IRowFactory {
 }
 
 export class PokemonSelectList extends React.Component<IPokemonSelectListProps, IState> {
-    private listRef : React.RefObject<VariableSizeList>;
+
+    public static getDerivedStateFromProps(nextProps : IPokemonSelectListProps, previousState : IState) {
+        const wasOpen = previousState.isListOpen;
+        const isOpen = nextProps.isListOpen;
+        const listCurrent = previousState.listRef.current;
+
+        if (isOpen && !wasOpen) {
+            if (listCurrent !== null) {
+                let pokemonIndex : number = -1;
+                nextProps.pokemonList.some((pokemon, index) => {
+                    if (pokemon.id === nextProps.activePokemonId && pokemon.form === nextProps.activePokemonForm) {
+                        pokemonIndex = index;
+                        return true;
+                    }
+                    return false;
+                });
+                if (pokemonIndex >= 0) {
+                    setTimeout(() => listCurrent.scrollToItem(pokemonIndex, 'center'), 0);
+                }
+            }
+        }
+
+        return {
+            isListOpen: isOpen && listCurrent !== null,
+        };
+    }
+
     private activatePokemonClickHandlers : Map<string, () => void>;
 
     constructor(props : IPokemonSelectListProps) {
         super(props);
 
         this.state = {
+            isListOpen: false,
+            listRef: React.createRef(),
             dimensions: {
                 width: -1,
                 height: -1,
             }
         };
 
-        this.listRef = React.createRef();
         this.activatePokemonClickHandlers = new Map();
     }
 
@@ -117,7 +146,7 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
                                     ({ measureRef }) => (
                                         <div ref={ measureRef }>
                                             <VariableSizeList
-                                                ref={ this.listRef }
+                                                ref={ this.state.listRef }
                                                 height={ height }
                                                 itemKey={ this.getListItemKey }
                                                 itemCount={ listLength }
@@ -215,8 +244,8 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
     private readonly handleChangeFilter = (event : React.ChangeEvent<HTMLInputElement>) => {
         this.props.handleChangeFilter(event.currentTarget.value)
         .then(() => {
-            if (this.listRef.current !== null) {
+            if (this.state.listRef.current !== null) {
-                this.listRef.current.resetAfterIndex(0, true);
+                this.state.listRef.current.resetAfterIndex(0, true);
             }
         });
     }
@@ -224,8 +253,8 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
     private readonly handleClickClearFilter = () => {
         this.props.handleChangeFilter('')
         .then(() => {
-            if (this.listRef.current !== null) {
+            if (this.state.listRef.current !== null) {
-                this.listRef.current.resetAfterIndex(0, true);
+                this.state.listRef.current.resetAfterIndex(0, true);
             }
         });
     }