Extended base Select functionality

Author: enicolasgomez

webapp/components/general/Select.js

@@ -4,14 +4,32 @@ import FormControl from '@material-ui/core/FormControl';
 import MuiSelect from '@material-ui/core/Select';
 
 class Select extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectOpen: false,
+    };
+  }
+
+  handleOpen = () => {
+    this.setState({ selectOpen: true });
+  };
+
+  handleClose = () => {
+    this.setState({ selectOpen: false });
+  };
 
   componentDidUpdate (prevProps, prevState) {
     if (this.props.commands !== prevProps.commands)
       this.forceUpdate();
   }
 
   render () {
+    const { id, multiple, pythonparams, children, onChange } = this.props;
+
     let value = this.props.value || '';
+    const { selectOpen } = this.state;
     if (this.props.multiple && value.constructor.name != 'Array') {
       // when loading values from a script, we can't allow strings if *multiple* is enabled
       value = [value];
@@ -23,14 +41,20 @@ class Select extends React.Component {
       <FormControl variant="filled" fullWidth>
         <InputLabel>{this.props.label}</InputLabel>
         <MuiSelect
-          id={this.props.id}
+          id={id}
           value={value}
-          onChange={this.props.onChange}
-          multiple={!!this.props.multiple}
-          pythonparams={this.props.pythonparams}
+          onChange={ (event) => {
+            onChange(event);
+            this.handleClose();
+          }}
+          multiple={!!multiple}
+          pythonparams={pythonparams}
+          open={selectOpen}
+          onOpen={this.handleOpen}
+          onClose={this.handleClose}
         >
-          {this.props.children}
-        </MuiSelect>
+        {children}
+      </MuiSelect>
 
       </FormControl>