Fix to UniversalSelect Component

client/src/components/Admin/RuleViewContainer.js

@@ -15,18 +15,23 @@ const RuleViewContainer = props => {
   const [ruleId, setRuleId] = useState(rules[0].id);
   const rule = rules.filter(rule => rule.id === ruleId)[0];
   const classes = useStyles();
+
+  const handleSetRule = e => {
+    const ruleId = Number(e.target.value);
+    setRuleId(ruleId);
+  };
+
   return (
     <React.Fragment>
       <UniversalSelect
         className={classes.select}
         options={rules.map(rule => ({
-          value: rule.id,
+          value: rule.id.toString(),
           label: rule.code
         }))}
-        defaultValue={
-          rules.length > 0 ? { value: rules[0].id, label: rules[0].code } : null
-        }
-        onChange={selectedOption => setRuleId(selectedOption.value)}
+        value={ruleId}
+        onChange={handleSetRule}
+        name={"Rule"}
       />
 
       <RuleView rule={rule} rules={rules} setRuleId={setRuleId} />
@@ -37,8 +42,8 @@ RuleViewContainer.propTypes = {
   rules: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.number,
-      filter: PropTypes.string.isRequired,
-      length: PropTypes.number.isRequired,
+      // filter: PropTypes.string.isRequired,
+      // length: PropTypes.number.isRequired,
       code: PropTypes.string.isRequired
     })
   )

client/src/components/ProjectWizard/RuleStrategy/RuleStrategy.js

@@ -5,7 +5,7 @@ import { createUseStyles, useTheme } from "react-jss";
 import clsx from "clsx";
 import AccordionToolTip from "../../ToolTip/AccordionToolTip";
 import RuleStrategyLabel from "./RuleStrategyLabel";
-// import UniversalSelect from "../../UI/UniversalSelect";
+import UniversalSelect from "../../UI/UniversalSelect";
 import AffordableEdgeCaseModal from "../AffordableEdgeCaseModal";
 
 const useStyles = createUseStyles(theme => ({
@@ -284,11 +284,10 @@ const RuleStrategy = ({
             setShowDescription={setShowDescription}
           />
           <div className={classes.choiceSelectContainer}>
-            {/* <UniversalSelect
+            <UniversalSelect
               autoFocus={autoFocus}
               className={classes.select}
-              value={value}
-              defaultValue={"0"}
+              value={value || "0"}
               onChange={onInputChangeIfAllowed}
               name={code}
               id={code}
@@ -297,22 +296,7 @@ const RuleStrategy = ({
                 value: choice.id,
                 label: choice.name
               }))}
-            /> */}
-            <select
-              autoFocus={autoFocus}
-              className={classes.select}
-              value={value || ""}
-              onChange={onInputChangeIfAllowed}
-              name={code}
-              id={code}
-              disabled={!display || !!readOnly}
-            >
-              {choices.map(choice => (
-                <option key={choice.id} value={choice.id}>
-                  {choice.name}
-                </option>
-              ))}
-            </select>
+            />
           </div>
           {possibleAndEarnedPointsContainers()}
         </div>

client/src/components/Projects/FilterDrawer.js

@@ -72,8 +72,8 @@ const FilterPopup = ({
     });
   };
 
-  const handleChange = (e, propertyName) => {
-    setCriteria({ ...criteria, [propertyName]: e.target.value });
+  const handleChange = e => {
+    setCriteria({ ...criteria, [e.target.name]: e.target.value });
 
     // reset any checked project rows when filter is applied
     setCheckedProjectIds([]);
@@ -125,33 +125,27 @@ const FilterPopup = ({
         </div>
 
         <UniversalSelect
-          defaultValue={projectTypeoptions.find(
-            option => option.value === criteria.type
-          )}
+          value={criteria.type}
           options={projectTypeoptions}
-          onChange={e => handleChange(e, "type")}
+          onChange={handleChange}
           name="type"
           className={classes.dropdown}
         />
 
         <h4 className={classes.minorHeading}>Status</h4>
         <UniversalSelect
-          defaultValue={statusOptions.find(
-            option => option.value === criteria.status
-          )}
+          value={criteria.status}
           options={statusOptions}
-          onChange={e => handleChange(e, "status")}
+          onChange={handleChange}
           name="status"
           className={classes.dropdown}
         />
 
         <h4 className={classes.minorHeading}>Visibility</h4>
         <UniversalSelect
-          defaultValue={visibilityOptions.find(
-            option => option.value === criteria.visibility
-          )}
+          value={criteria.visibility}
           options={visibilityOptions}
-          onChange={e => handleChange(e, "visibility")}
+          onChange={handleChange}
           name="visibility"
           className={classes.dropdown}
         />

client/src/components/Projects/ProjectsPage.js

@@ -786,9 +786,7 @@ const ProjectsPage = ({ contentContainerRef }) => {
                   maxNumOfVisiblePages={5}
                 />
                 <UniversalSelect
-                  defaultValue={perPageOptions.find(
-                    option => option.value === perPage
-                  )}
+                  value={perPage}
                   options={perPageOptions}
                   onChange={e => handlePerPageChange(e.target.value)}
                   name="perPage"

client/src/components/UI/UniversalSelect.jsx

@@ -31,6 +31,8 @@ export default function UniversalSelect({
   autoFocus,
   className
 }) {
+  // To make UniversalSelect compatible with a standard react <select> component, the onChange method should be passed
+  // an object that at least looks like an event object.
   const handleSelectChange = selectedOption => {
     onChange({
       target: {
@@ -39,12 +41,15 @@ export default function UniversalSelect({
       }
     });
   };
+
   return (
     <Select
       className={classNames(className)}
       autoFocus={autoFocus}
       onChange={handleSelectChange}
-      value={value}
+      // To make value compatible with a standard react <select> component, value should be passed the value of
+      // the selected option.
+      value={options.find(o => o.value == value) || ""}
       defaultValue={defaultValue}
       name={name}
       inputId={id}