Merge pull request #154 from GNS-Science/feature/MFD_bar_chart

mfd lines menu closes on click;

Author: benjamineac

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gns-science/toshi-nest",
-  "version": "3.9.5",
+  "version": "3.9.6",
   "description": "The toshi-nest is for fledgling work e.g. reusable Node components to share across TUI and other projects",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

src/MfdPlot/MfdPlot.tsx

@@ -70,14 +70,29 @@ export const MfdPlot = ({
         style={{ zIndex: 120001 }}
       >
         <RadioGroup aria-labelledby="radio-buttons-group-label" defaultValue="Incremental" name="radio-buttons-group" onChange={handleRadioChange}>
-          <MenuItem>
-            <FormControlLabel checked={linesToDisplay === 'Incremental'} value="Incremental" control={<Radio />} label="Incremental" />
+          <MenuItem
+            onClick={() => {
+              setLinesToDisplay('Incremental');
+              handleClose();
+            }}
+          >
+            <FormControlLabel onClick={handleClose} checked={linesToDisplay === 'Incremental'} value="Incremental" control={<Radio />} label="Incremental" />
           </MenuItem>
-          <MenuItem>
-            <FormControlLabel checked={linesToDisplay === 'Cumulative'} value="Cumulative" control={<Radio />} label="Cumulative" />
+          <MenuItem
+            onClick={() => {
+              setLinesToDisplay('Cumulative');
+              handleClose();
+            }}
+          >
+            <FormControlLabel onClick={handleClose} checked={linesToDisplay === 'Cumulative'} value="Cumulative" control={<Radio />} label="Cumulative" />
           </MenuItem>
-          <MenuItem>
-            <FormControlLabel checked={linesToDisplay === 'Both'} value="Both" control={<Radio />} label="Both" />
+          <MenuItem
+            onClick={() => {
+              setLinesToDisplay('Both');
+              handleClose();
+            }}
+          >
+            <FormControlLabel onClick={handleClose} checked={linesToDisplay === 'Both'} value="Both" control={<Radio />} label="Both" />
           </MenuItem>
         </RadioGroup>
       </Menu>