refs #14161 Merge branch 'origin/14161-inputs-focus-enter-action'

[arvados-workbench2.git] / src / components / search-bar / search-bar.tsx

diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx
index de9e7de5261c299870cc16d4618971869dfc273b..f01b5692f204ca3a72683f71cdecdbaf194a4108 100644 (file)
--- a/src/components/search-bar/search-bar.tsx
+++ b/src/components/search-bar/search-bar.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { IconButton, Paper, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
+import { IconButton, Paper, StyleRulesCallback, withStyles, WithStyles, Tooltip } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 
 type CssRules = 'container' | 'input' | 'button';
@@ -58,7 +58,7 @@ export const SearchBar = withStyles(styles)(
         timeout: number;
 
         render() {
-            const {classes} = this.props;
+            const { classes } = this.props;
             return <Paper className={classes.container}>
                 <form onSubmit={this.handleSubmit}>
                     <input
@@ -67,20 +67,22 @@ export const SearchBar = withStyles(styles)(
                         placeholder="Search"
                         value={this.state.value}
                     />
-                    <IconButton className={classes.button}>
-                        <SearchIcon/>
-                    </IconButton>
+                    <Tooltip title='Search'>
+                        <IconButton className={classes.button}>
+                            <SearchIcon />
+                        </IconButton>
+                    </Tooltip>
                 </form>
             </Paper>;
         }
 
         componentDidMount() {
-            this.setState({value: this.props.value});
+            this.setState({ value: this.props.value });
         }
 
         componentWillReceiveProps(nextProps: SearchBarProps) {
             if (nextProps.value !== this.props.value) {
-                this.setState({value: nextProps.value});
+                this.setState({ value: nextProps.value });
             }
         }
 
@@ -96,7 +98,7 @@ export const SearchBar = withStyles(styles)(
 
         handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
             clearTimeout(this.timeout);
-            this.setState({value: event.target.value});
+            this.setState({ value: event.target.value });
             this.timeout = window.setTimeout(
                 () => this.props.onSearch(this.state.value),
                 this.props.debounce || DEFAULT_SEARCH_DEBOUNCE