Refactored ItemTableFilter to address label overflow bug when filter had a value

src/components/ItemTableFilter/ItemTableFilter.js

@@ -1,35 +1,36 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles, TextField } from "@material-ui/core";
+import { Box, FormControl, InputLabel, makeStyles, OutlinedInput,} from "@material-ui/core";
 
 export default function ItemTableFilter({ label, onChange }) {
-
   const useStyles = makeStyles({
-    labelRoot: {
-      overflow: "hidden"
-    },
-    labelFocused: {
-      overflow: "visible"
+    filterContainer: {
+      overflowX: "hidden"
     },
   });
   const classes = useStyles();
 
-  const [isFocused, setIsFocused] = useState(false);
-
+  // The FormControl is wrapped in a box with overflowX=hidden to prevent the
+  // InputLabel text from going outside its textfield.
+  // See: https://github.itap.purdue.edu/ECN/webqueue2/issues/156
   return (
-      <TextField
-        label={label}
-        onChange={onChange}
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
-        className={ isFocused ? classes.labelFocused : classes.labelRoot }
+    <Box classes={{ root: classes.filterContainer }} >
+      <FormControl
         color="secondary"
-        type="search"
+        fullWidth
+        margin="dense"
         size="small"
         variant="outlined"
-      />
+      >
+        <InputLabel htmlFor={label}>{label}</InputLabel>
+        <OutlinedInput
+          id="component-outlined"
+          onChange={onChange}
+          label={label}
+        />
+      </FormControl>
+    </Box>
   );
-
 };
 
 ItemTableFilter.propTypes = {
@@ -41,4 +42,4 @@ ItemTableFilter.propTypes = {
 
 ItemTableFilter.defaultProps = {
   "label": ""
-}
+}