1 files changed, 12 insertions, 12 deletions
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index c147ae8..13cc1fc 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -102,15 +102,16 @@ const MainPage = () => {
   const isTablet = useMediaQuery(theme.breakpoints.down('md'));
   const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
 
-  //const [deviceName, setDeviceName] = useState('');
+  const [deviceName, setDeviceName] = useState('');
   const collapsed = useSelector((state) => state.ui.collapsed);
 
   const handleClose = () => {
     dispatch(uiActions.setCollapsed(!collapsed));
   };
   
-  const setDeviceName = (event) => {
-    dispatch(devicesActions.setFilter(event.target.value));
+  const setFilter = (text) => {
+    setDeviceName(text);
+    dispatch(devicesActions.setFilter(text));
   }
 
   useEffect(() => uiActions.setCollapsed(isTablet), [isTablet]);
@@ -148,22 +149,21 @@ const MainPage = () => {
             <TextField
               fullWidth
               name="deviceName"
-              /*name="deviceName"
               value={deviceName}
-              autoComplete="deviceName"*/
+              autoComplete="deviceName"
               autoFocus
-              onChange={(event) => setDeviceName(event) }
-              placeholder="Search Devices"
+              onChange={(event) => setFilter(event.target.value) }
+              placeholder={t("sharedSearch")}
               variant="filled"
             />
+            {deviceName.length > 0 && (
+              <IconButton onClick={() => setFilter("") }>
+                <CloseIcon />
+              </IconButton>
+            )}
             <IconButton onClick={() => history.push('/device')}>
               <AddIcon />
             </IconButton>
-            {!isTablet && (
-            <IconButton onClick={handleClose}>
-              <CloseIcon />
-            </IconButton>
-            )}
           </Toolbar>
         </Paper>
         <div className={classes.deviceList}>