diff --git a/src/components/ItemTableFilter/ItemTableFilter.js b/src/components/ItemTableFilter/ItemTableFilter.js index 68f9d56..b5a2fae 100644 --- a/src/components/ItemTableFilter/ItemTableFilter.js +++ b/src/components/ItemTableFilter/ItemTableFilter.js @@ -1,21 +1,33 @@ -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { TextField } from "@material-ui/core"; +import { makeStyles, TextField } from "@material-ui/core"; export default function ItemTableFilter({ label, onChange }) { + const useStyles = makeStyles({ + labelRoot: { + overflow: "hidden" + }, + labelFocused: { + overflow: "visible" + }, + }); + const classes = useStyles(); + + const [isFocused, setIsFocused] = useState(false); + return ( - <> setIsFocused(true)} + onBlur={() => setIsFocused(false)} + className={ isFocused ? classes.labelFocused : classes.labelRoot } color="secondary" type="search" size="small" variant="outlined" - fullWidth /> - ); };