refactor move overlay to state

dist/app.css

@@ -93,7 +93,7 @@
   font-size: 0.8em;
   display: flex;
   justify-content: space-between;
-  margin: -0.5rem 0 0.5rem 0; }
+  margin: 0 0 0.5rem 0; }
 
 .LeagueSelector__leagueRadioLabel__23hqE {
   display: flex;
@@ -370,8 +370,7 @@
 
 .MovesDropdown__menu__2yxRm {
   width: 425px;
-  max-height: 454px;
+  max-height: 458px;
-  overflow: hidden;
   position: fixed;
   z-index: 2;
   top: 25%;

dist/main-bundle.js

@@ -36767,8 +36767,6 @@ exports.PokemonService = PokemonService;
 
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
@@ -36777,6 +36775,8 @@ function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d =
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -36885,16 +36885,27 @@ function (_react_1$default$Comp) {
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(PokemonApp).call(this, props));
 
-    _this.handleToggleInterruption = function (isInterruption) {
+    _this.handleToggleDropdownOpen = function (menu, isOpen) {
       _this.setState({
-        isInterruption: isInterruption
+        isInterruption: isOpen
       });
+
+      var combatMoveSelectorsOpen = Object.assign({}, _this.props.pokemonExplorerState.combatMoveSelectorsOpen, _defineProperty({}, menu, isOpen));
+
+      _this.props.dispatch(ActionsPokemonExplorer.setCombatMoveSelectorsOpen(combatMoveSelectorsOpen));
     };
 
     _this.handleOverlayClick = function () {
       _this.setState({
-        activeNavigation: null
+        activeNavigation: null,
+        isInterruption: false
       });
+
+      _this.props.dispatch(ActionsPokemonExplorer.setCombatMoveSelectorsOpen({
+        quickMove: false,
+        chargeMove1: false,
+        chargeMove2: false
+      }));
     };
 
     _this.handlePokedexClick = function () {
@@ -37080,7 +37091,8 @@ function (_react_1$default$Comp) {
           individualValues = _this$props$pokemonEx.individualValues,
           leaguePokemon = _this$props$pokemonEx.leaguePokemon,
           combatMoves = _this$props$pokemonEx.combatMoves,
-          selectedCombatMoves = _this$props$pokemonEx.selectedCombatMoves;
+          selectedCombatMoves = _this$props$pokemonEx.selectedCombatMoves,
+          combatMoveSelectorsOpen = _this$props$pokemonEx.combatMoveSelectorsOpen;
       var _this$state = this.state,
           isInterruption = _this$state.isInterruption,
           activeNavigation = _this$state.activeNavigation,
@@ -37144,7 +37156,8 @@ function (_react_1$default$Comp) {
         quickMoves: leaguePokemon.moves.quick,
         chargeMoves: leaguePokemon.moves.cinematic,
         selectedMoves: selectedCombatMoves,
-        handleToggleDropdownOpen: this.handleToggleInterruption,
+        combatMoveSelectorsOpen: combatMoveSelectorsOpen,
+        handleToggleDropdownOpen: this.handleToggleDropdownOpen,
         handleChangeSelectedMove: this.handleChangeSelectedMove
       })), react_1.default.createElement("div", {
         className: leftNavCss
@@ -37308,6 +37321,12 @@ exports.setSelectedCombatMoves = function (moves) {
   });
 };
 
+exports.setCombatMoveSelectorsOpen = function (selectorsOpen) {
+  return typesafe_actions_1.action(types_1.PokemonExplorerActionTypes.SET_COMBAT_MOVE_SELECTORS_OPEN, {
+    selectorsOpen: selectorsOpen
+  });
+};
+
 exports.fetchConfig = function () {
   return function (dispatch, getState, extraArguments) {
     return __awaiter(_this, void 0, void 0,
@@ -38490,17 +38509,10 @@ function (_react_1$default$Comp) {
     _this = _possibleConstructorReturn(this, _getPrototypeOf(MovesDropdown).call(this, props));
 
     _this.toggleMenu = function () {
-      var isMenuOpen = !_this.state.isMenuOpen;
+      _this.props.handleToggleOpen(!_this.props.isMenuOpen);
-
-      _this.setState({
-        isMenuOpen: isMenuOpen
-      });
-
-      _this.props.handleToggleOpen(isMenuOpen);
     };
 
     _this.state = {
-      isMenuOpen: false,
       listRef: react_1.default.createRef(),
       dimensions: {
         width: -1,
@@ -38516,11 +38528,11 @@ function (_react_1$default$Comp) {
       var _this2 = this;
 
       var _this$props = this.props,
+          isMenuOpen = _this$props.isMenuOpen,
           menuLabel = _this$props.menuLabel,
           movesById = _this$props.movesById,
           selectedMove = _this$props.selectedMove,
           options = _this$props.options;
-      var isMenuOpen = this.state.isMenuOpen;
       var _this$state$dimension = this.state.dimensions,
           width = _this$state$dimension.width,
           height = _this$state$dimension.height;
@@ -38607,6 +38619,20 @@ function (_react_1$default$Comp) {
         type: moveStats.type
       })));
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, previousState) {
+      if (!nextProps.isMenuOpen) {
+        return Object.assign({}, previousState, {
+          dimensions: {
+            width: -1,
+            height: -1
+          }
+        });
+      }
+
+      return null;
+    }
   }]);
 
   return MovesDropdown;
@@ -38703,18 +38729,30 @@ function (_react_1$default$Comp) {
       return null;
     };
 
+    _this.handleToggleQuickMoveMenu = function (isOpen) {
+      _this.props.handleToggleDropdownOpen('quickMove', isOpen);
+    };
+
     _this.handleChangeQuickMove = function (option) {
       _this.props.handleChangeSelectedMove(Object.assign({}, _this.props.selectedMoves, {
         quickMove: option
       }));
     };
 
+    _this.handleToggleChargeMove1Menu = function (isOpen) {
+      _this.props.handleToggleDropdownOpen('chargeMove1', isOpen);
+    };
+
     _this.handleChangeChargeMove1 = function (option) {
       _this.props.handleChangeSelectedMove(Object.assign({}, _this.props.selectedMoves, {
         chargeMove1: option
       }));
     };
 
+    _this.handleToggleChargeMove2Menu = function (isOpen) {
+      _this.props.handleToggleDropdownOpen('chargeMove2', isOpen);
+    };
+
     _this.handleChangeChargeMove2 = function (option) {
       _this.props.handleChangeSelectedMove(Object.assign({}, _this.props.selectedMoves, {
         chargeMove2: option
@@ -38731,7 +38769,7 @@ function (_react_1$default$Comp) {
           movesById = _this$props.movesById,
           quickMoves = _this$props.quickMoves,
           chargeMoves = _this$props.chargeMoves,
-          handleToggleDropdownOpen = _this$props.handleToggleDropdownOpen;
+          combatMoveSelectorsOpen = _this$props.combatMoveSelectorsOpen;
       var _this$props$selectedM = this.props.selectedMoves,
           quickMove = _this$props$selectedM.quickMove,
           chargeMove1 = _this$props$selectedM.chargeMove1,
@@ -38747,30 +38785,33 @@ function (_react_1$default$Comp) {
         className: wrapperCss
       }, react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
         menuLabel: "Quick Move",
+        isMenuOpen: combatMoveSelectorsOpen.quickMove,
         movesById: movesById,
         selectedMove: quickMove,
         options: quickMoves,
-        handleToggleOpen: handleToggleDropdownOpen,
+        handleToggleOpen: this.handleToggleQuickMoveMenu,
         handleChangeSelectedOption: this.handleChangeQuickMove
       }), quickMove && quickMoveType && react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
         className: quickMoveCss,
         type: quickMoveType
       }), react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
+        isMenuOpen: combatMoveSelectorsOpen.chargeMove1,
         menuLabel: "Charge Move 1",
         movesById: movesById,
         selectedMove: chargeMove1,
         options: chargeMoves,
-        handleToggleOpen: handleToggleDropdownOpen,
+        handleToggleOpen: this.handleToggleChargeMove1Menu,
         handleChangeSelectedOption: this.handleChangeChargeMove1
       }), chargeMove1 && chargeMove1Type && react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
         className: chargeMove1Css,
         type: chargeMove1Type
       }), react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
+        isMenuOpen: combatMoveSelectorsOpen.chargeMove2,
         menuLabel: "Charge Move 2",
         movesById: movesById,
         selectedMove: chargeMove2,
         options: chargeMoves,
-        handleToggleOpen: handleToggleDropdownOpen,
+        handleToggleOpen: this.handleToggleChargeMove2Menu,
         handleChangeSelectedOption: this.handleChangeChargeMove2
       }), chargeMove2 && chargeMove2Type && react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
         className: chargeMove2Css,
@@ -40170,6 +40211,11 @@ exports.initialState = {
     quickMove: null,
     chargeMove1: null,
     chargeMove2: null
+  },
+  combatMoveSelectorsOpen: {
+    quickMove: false,
+    chargeMove1: false,
+    chargeMove2: false
   }
 };
 
@@ -40241,6 +40287,12 @@ var reduceSetSelectedCombatMoves = function reduceSetSelectedCombatMoves(state,
   });
 };
 
+var reduceSetCombatMoveSelectorsOpen = function reduceSetCombatMoveSelectorsOpen(state, action) {
+  return Object.assign({}, state, {
+    combatMoveSelectorsOpen: Object.assign({}, action.payload.selectorsOpen)
+  });
+};
+
 exports.PokemonExplorerReducers = function () {
   var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : exports.initialState;
   var action = arguments.length > 1 ? arguments[1] : undefined;
@@ -40276,6 +40328,9 @@ exports.PokemonExplorerReducers = function () {
     case types_1.PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES:
       return reduceSetSelectedCombatMoves(state, action);
 
+    case types_1.PokemonExplorerActionTypes.SET_COMBAT_MOVE_SELECTORS_OPEN:
+      return reduceSetCombatMoveSelectorsOpen(state, action);
+
     default:
       return state;
   }
@@ -40450,7 +40505,8 @@ exports.PokemonExplorerActionTypes = {
   SET_IV_ATK: 'POKEMON_EXPLORER/SET_IV_ATK',
   SET_IV_DEF: 'POKEMON_EXPLORER/SET_IV_DEF',
   SET_ACTIVE_LEAGUE: 'POKEMON_EXPLORER/SET_ACTIVE_LEAGUE',
-  SET_SELECTED_COMBAT_MOVES: 'POKEMON_EXPLORER/SET_SELECTED_COMBAT_MOVES'
+  SET_SELECTED_COMBAT_MOVES: 'POKEMON_EXPLORER/SET_SELECTED_COMBAT_MOVES',
+  SET_COMBAT_MOVE_SELECTORS_OPEN: 'POKEMON_EXPLORER/SET_COMBAT_MOVE_SELECTORS_OPEN'
 };
 
 /***/ }),

src/ts/app/PokemonApp.tsx

@@ -12,7 +12,7 @@ import { appReducers } from 'app/index';
 
 import * as ActionsPokemonExplorer from 'app/actions';
 import * as ActionsPokemonSelectList from 'app/components/PokemonSelectList/actions';
-import { IndividualValueKey, IPokemonAppDispatch, ISelectedCombatMoves } from 'app/types';
+import { CombatMoveSelectorsOpen, IndividualValueKey, IPokemonAppDispatch, SelectedCombatMoves } from 'app/types';
 
 import { Footer } from 'app/components/Footer';
 import { Header } from 'app/components/Header';
@@ -102,7 +102,8 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             individualValues,
             leaguePokemon,
             combatMoves,
-            selectedCombatMoves
+            selectedCombatMoves,
+            combatMoveSelectorsOpen,
         } = this.props.pokemonExplorerState;
         const {
             isInterruption,
@@ -228,7 +229,8 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
                                 quickMoves={ leaguePokemon.moves.quick }
                                 chargeMoves={ leaguePokemon.moves.cinematic }
                                 selectedMoves={ selectedCombatMoves }
-                                handleToggleDropdownOpen={ this.handleToggleInterruption }
+                                combatMoveSelectorsOpen={ combatMoveSelectorsOpen }
+                                handleToggleDropdownOpen={ this.handleToggleDropdownOpen }
                                 handleChangeSelectedMove={ this.handleChangeSelectedMove }
                             />
                         }
@@ -247,16 +249,27 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
         );
     }
 
-    private readonly handleToggleInterruption = (isInterruption : boolean) => {
+    private readonly handleToggleDropdownOpen = (menu : keyof CombatMoveSelectorsOpen, isOpen : boolean) => {
         this.setState({
-            isInterruption,
+            isInterruption: isOpen,
         });
+        const combatMoveSelectorsOpen : CombatMoveSelectorsOpen = {
+            ...this.props.pokemonExplorerState.combatMoveSelectorsOpen,
+            [menu]: isOpen, // 3/10/2019: TyepScript is not checking this!
+        };
+        this.props.dispatch(ActionsPokemonExplorer.setCombatMoveSelectorsOpen(combatMoveSelectorsOpen));
     }
 
     private readonly handleOverlayClick = () => {
         this.setState({
             activeNavigation: null,
+            isInterruption: false,
         });
+        this.props.dispatch(ActionsPokemonExplorer.setCombatMoveSelectorsOpen({
+            quickMove: false,
+            chargeMove1: false,
+            chargeMove2: false,
+        }));
     }
 
     private readonly handlePokedexClick = () => {
@@ -354,7 +367,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
         this.props.dispatch(ActionsPokemonExplorer.maximizeLevel());
     }
 
-    private readonly handleChangeSelectedMove = (moves : ISelectedCombatMoves) => {
+    private readonly handleChangeSelectedMove = (moves : SelectedCombatMoves) => {
         this.props.dispatch(ActionsPokemonExplorer.setSelectedCombatMoves(moves));
     }
 

src/ts/app/actions.ts

@@ -1,6 +1,6 @@
 import { action } from 'typesafe-actions';
 
-import { ISelectedCombatMoves, PokemonExplorerActionTypes, ThunkResult } from 'app/types';
+import { CombatMoveSelectorsOpen, PokemonExplorerActionTypes, SelectedCombatMoves, ThunkResult } from 'app/types';
 
 import { calculateMaxLevelForLeague } from 'app/utils/calculator';
 
@@ -25,7 +25,9 @@ export const setIvDef = (ivDef : number | null) => action(PokemonExplorerActionT
 
 export const setActiveLeague = (league : League) => action(PokemonExplorerActionTypes.SET_ACTIVE_LEAGUE, { league });
 
-export const setSelectedCombatMoves = (moves : ISelectedCombatMoves) => action(PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES, { moves });
+export const setSelectedCombatMoves = (moves : SelectedCombatMoves) => action(PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES, { moves });
+
+export const setCombatMoveSelectorsOpen = (selectorsOpen : CombatMoveSelectorsOpen) => action(PokemonExplorerActionTypes.SET_COMBAT_MOVE_SELECTORS_OPEN, { selectorsOpen });
 
 export const fetchConfig = (
 ) : ThunkResult<Promise<void>> => {

src/ts/app/components/MovesDropdown.tsx

@@ -11,6 +11,7 @@ import { TypeIndicator } from './TypeIndicator';
 import * as styles from 'app/styles/MovesDropdown.scss';
 
 export interface IMovesDropdownProps {
+    isMenuOpen : boolean;
     menuLabel : string;
     movesById : CombatMoveStats;
     selectedMove : IPokemonMove | null;
@@ -20,7 +21,6 @@ export interface IMovesDropdownProps {
 }
 
 interface IState {
-    isMenuOpen : boolean;
     listRef : React.RefObject<FixedSizeList>;
     dimensions : {
         width : number;
@@ -35,11 +35,23 @@ interface IRowFactory {
 
 export class MovesDropdown extends React.Component<IMovesDropdownProps, IState> {
 
+    public static getDerivedStateFromProps(nextProps : IMovesDropdownProps, previousState : IState) {
+        if (!nextProps.isMenuOpen) {
+            return {
+                ...previousState,
+                dimensions: {
+                    width: -1,
+                    height: -1,
+                }
+            };
+        }
+        return null;
+    }
+
     constructor(props : IMovesDropdownProps) {
         super(props);
 
         this.state = {
-            isMenuOpen: false,
             listRef: React.createRef(),
             dimensions: {
                 width: -1,
@@ -50,14 +62,12 @@ export class MovesDropdown extends React.Component<IMovesDropdownProps, IState>
 
     public render() {
         const {
+            isMenuOpen,
             menuLabel,
             movesById,
             selectedMove,
             options,
         } = this.props;
-        const {
-            isMenuOpen,
-        } = this.state;
 
         const { width, height } = this.state.dimensions;
         const onResize = (contentRect : ContentRect) => {
@@ -128,11 +138,7 @@ export class MovesDropdown extends React.Component<IMovesDropdownProps, IState>
     }
 
     private readonly toggleMenu = () => {
-        const isMenuOpen = !this.state.isMenuOpen;
+        this.props.handleToggleOpen(!this.props.isMenuOpen);
-        this.setState({
-            isMenuOpen,
-        });
-        this.props.handleToggleOpen(isMenuOpen);
     }
 
     private rowFactory({ index, style } : IRowFactory) {

src/ts/app/components/MovesExplorer.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { CombatMoveStats, ICombatMoveStats, IPokemonMove } from 'app/models/Pokemon';
 
-import { ISelectedCombatMoves } from 'app/types';
+import { CombatMoveSelectorsOpen, SelectedCombatMoves } from 'app/types';
 
 import { MovesDropdown } from 'app/components/MovesDropdown';
 import { TypeIndicator } from './TypeIndicator';
@@ -20,8 +20,9 @@ export interface IMovesExplorerProps {
         chargeMove1 : IPokemonMove | null;
         chargeMove2 : IPokemonMove | null;
     };
-    handleToggleDropdownOpen : (isOpen : boolean) => void;
+    combatMoveSelectorsOpen : CombatMoveSelectorsOpen;
-    handleChangeSelectedMove : (moves : ISelectedCombatMoves) => void;
+    handleToggleDropdownOpen : (menu : keyof CombatMoveSelectorsOpen, isOpen : boolean) => void;
+    handleChangeSelectedMove : (moves : SelectedCombatMoves) => void;
 }
 
 export class MovesExplorer extends React.Component<IMovesExplorerProps> {
@@ -31,7 +32,7 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps> {
             movesById,
             quickMoves,
             chargeMoves,
-            handleToggleDropdownOpen,
+            combatMoveSelectorsOpen,
         } = this.props;
         const {
             quickMove,
@@ -61,32 +62,35 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps> {
             <div className={ wrapperCss }>
                 <MovesDropdown
                     menuLabel="Quick Move"
+                    isMenuOpen={ combatMoveSelectorsOpen.quickMove }
                     movesById={ movesById }
                     selectedMove={ quickMove }
                     options={ quickMoves }
-                    handleToggleOpen={ handleToggleDropdownOpen }
+                    handleToggleOpen={ this.handleToggleQuickMoveMenu }
                     handleChangeSelectedOption={ this.handleChangeQuickMove }
                 />
                 { quickMove && quickMoveType &&
                     <TypeIndicator className={ quickMoveCss } type={ quickMoveType } />
                 }
                 <MovesDropdown
+                    isMenuOpen={ combatMoveSelectorsOpen.chargeMove1 }
                     menuLabel="Charge Move 1"
                     movesById={ movesById }
                     selectedMove={ chargeMove1 }
                     options={ chargeMoves }
-                    handleToggleOpen={ handleToggleDropdownOpen }
+                    handleToggleOpen={ this.handleToggleChargeMove1Menu }
                     handleChangeSelectedOption={ this.handleChangeChargeMove1 }
                 />
                 { chargeMove1 && chargeMove1Type &&
                     <TypeIndicator className={ chargeMove1Css } type={ chargeMove1Type } />
                 }
                 <MovesDropdown
+                    isMenuOpen={ combatMoveSelectorsOpen.chargeMove2 }
                     menuLabel="Charge Move 2"
                     movesById={ movesById }
                     selectedMove={ chargeMove2 }
                     options={ chargeMoves }
-                    handleToggleOpen={ handleToggleDropdownOpen }
+                    handleToggleOpen={ this.handleToggleChargeMove2Menu }
                     handleChangeSelectedOption={ this.handleChangeChargeMove2 }
                 />
                 { chargeMove2 && chargeMove2Type &&
@@ -107,6 +111,10 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps> {
         return null;
     }
 
+    private readonly handleToggleQuickMoveMenu = (isOpen : boolean) => {
+        this.props.handleToggleDropdownOpen('quickMove', isOpen);
+    }
+
     private readonly handleChangeQuickMove = (option : IPokemonMove) => {
         this.props.handleChangeSelectedMove({
             ...this.props.selectedMoves,
@@ -114,6 +122,10 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps> {
         });
     }
 
+    private readonly handleToggleChargeMove1Menu = (isOpen : boolean) => {
+        this.props.handleToggleDropdownOpen('chargeMove1', isOpen);
+    }
+
     private readonly handleChangeChargeMove1 = (option : IPokemonMove) => {
         this.props.handleChangeSelectedMove({
             ...this.props.selectedMoves,
@@ -121,6 +133,10 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps> {
         });
     }
 
+    private readonly handleToggleChargeMove2Menu = (isOpen : boolean) => {
+        this.props.handleToggleDropdownOpen('chargeMove2', isOpen);
+    }
+
     private readonly handleChangeChargeMove2 = (option : IPokemonMove) => {
         this.props.handleChangeSelectedMove({
             ...this.props.selectedMoves,

src/ts/app/reducers.ts

@@ -27,6 +27,11 @@ export const initialState : IPokemonExplorerState = {
         chargeMove1: null,
         chargeMove2: null,
     },
+    combatMoveSelectorsOpen: {
+        quickMove: false,
+        chargeMove1: false,
+        chargeMove2: false,
+    },
 };
 
 const reduceSetIsLoading = (
@@ -125,6 +130,16 @@ const reduceSetSelectedCombatMoves = (
     }
 });
 
+const reduceSetCombatMoveSelectorsOpen = (
+    state : IPokemonExplorerState,
+    action : ReturnType<typeof Actions.setCombatMoveSelectorsOpen>
+) : IPokemonExplorerState => ({
+    ...state,
+    combatMoveSelectorsOpen: {
+        ...action.payload.selectorsOpen
+    }
+});
+
 export const PokemonExplorerReducers : Reducer<IPokemonExplorerState> = (
     state : IPokemonExplorerState = initialState,
     action,
@@ -150,6 +165,8 @@ export const PokemonExplorerReducers : Reducer<IPokemonExplorerState> = (
             return reduceSetActiveLeague(state, action as ReturnType<typeof Actions.setActiveLeague>);
         case PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES:
             return reduceSetSelectedCombatMoves(state, action as ReturnType<typeof Actions.setSelectedCombatMoves>);
+        case PokemonExplorerActionTypes.SET_COMBAT_MOVE_SELECTORS_OPEN:
+            return reduceSetCombatMoveSelectorsOpen(state, action as ReturnType<typeof Actions.setCombatMoveSelectorsOpen>);
         default:
             return state;
     }

src/ts/app/styles/LeagueSelector.scss

@@ -71,7 +71,7 @@
   font-size: 0.8em;
   display: flex;
   justify-content: space-between;
-  margin: -0.5rem 0 0.5rem 0;
+  margin: 0 0 0.5rem 0;
 }
 
 .leagueRadioLabel {

src/ts/app/styles/MovesDropdown.scss

@@ -6,8 +6,7 @@
 
 .menu {
   width: map-get($container-width, 'desktop');
-  max-height: 450px + 4px; // +4 for border offset causing issue with .nes-container
+  max-height: 450px + 8px; // +4 for top/bottom border offset causing issue with .nes-container
-  overflow: hidden;
   position: fixed;
   z-index: 2;
   top: 25%;

src/ts/app/types.ts

@@ -39,11 +39,15 @@ export interface IIndividualValues {
     ivDef : number | null;
 }
 
-export interface ISelectedCombatMoves {
+type MoveTypes = 'quickMove' | 'chargeMove1' | 'chargeMove2';
-    quickMove : IPokemonMove | null;
+
-    chargeMove1 : IPokemonMove | null;
+export type SelectedCombatMoves = {
-    chargeMove2 : IPokemonMove | null;
+    [ key in MoveTypes ] : IPokemonMove | null;
-}
+};
+
+export type CombatMoveSelectorsOpen = {
+    [ key in MoveTypes ] : boolean;
+};
 
 export interface IPokemonExplorerState {
     isLoading : boolean;
@@ -52,7 +56,8 @@ export interface IPokemonExplorerState {
     individualValues : IIndividualValues;
     league : League;
     combatMoves : CombatMoveStats;
-    selectedCombatMoves : ISelectedCombatMoves;
+    selectedCombatMoves : SelectedCombatMoves;
+    combatMoveSelectorsOpen : CombatMoveSelectorsOpen;
 }
 
 export const PokemonExplorerActionTypes = {
@@ -66,4 +71,5 @@ export const PokemonExplorerActionTypes = {
     SET_IV_DEF: 'POKEMON_EXPLORER/SET_IV_DEF',
     SET_ACTIVE_LEAGUE: 'POKEMON_EXPLORER/SET_ACTIVE_LEAGUE',
     SET_SELECTED_COMBAT_MOVES: 'POKEMON_EXPLORER/SET_SELECTED_COMBAT_MOVES',
+    SET_COMBAT_MOVE_SELECTORS_OPEN: 'POKEMON_EXPLORER/SET_COMBAT_MOVE_SELECTORS_OPEN',
 };