Fixed filter label overflow using useState and javascript event liste…

…ners

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"
-
       />
-    </>
   );
 
 };