From 2221f28a4f0844ea1cdfdf606bb9c00d1ea7a165 Mon Sep 17 00:00:00 2001
From: Tyler Jordan Wright <wrigh393@w2vm1.ecn.purdue.edu>
Date: Wed, 4 Nov 2020 10:51:19 -0500
Subject: [PATCH] Fixed filter label overflow using useState and javascript
 event listeners

---
 .../ItemTableFilter/ItemTableFilter.js        | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/ItemTableFilter/ItemTableFilter.js b/src/components/ItemTableFilter/ItemTableFilter.js
index 82e631a..a3ed137 100644
--- a/src/components/ItemTableFilter/ItemTableFilter.js
+++ b/src/components/ItemTableFilter/ItemTableFilter.js
@@ -1,37 +1,33 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { TextField, makeStyles } from "@material-ui/core";
-import { pink, purple } from '@material-ui/core/colors';
+import { makeStyles, TextField } from "@material-ui/core";
 
 export default function ItemTableFilter({ label, onChange }) {
 
   const useStyles = makeStyles({
-
     labelRoot: {
-      fontSize: 14,
+      overflow: "hidden"
     },
-
-  },
-  );
-  
+    labelFocused: {
+      overflow: "visible"
+    },
+  });
   const classes = useStyles();
 
-  return (
-    <>
+  const [isFocused, setIsFocused] = useState(false);
 
+  return (
       <TextField
         label={label}
         onChange={onChange}
-        classes={{ root: classes.inputLabelStyles }}
-        InputLabelProps={{
-        classes: { root: classes.labelRoot, focused: classes.labelFocused }}}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        className={ isFocused ? classes.labelFocused : classes.labelRoot }
         color="secondary"
         type="search"
         size="small"
         variant="outlined"
-
       />
-    </>
   );
 
 };