Merge branch '747-home-page-search-doesn-t-work-via-enter' into 'master'

Fix: Home page search doesn't work via ENTER

Closes #747

See merge request genesys-pgr/genesys-ui!727

workspaces/ui-express/src/ui/pages/welcome/index.tsx

@@ -493,27 +493,9 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
         this.setState({loaded: true});
     }
 
-    public render() {
-        const { classes, t, serverInfo, lastNews, navigateTo } = this.props;
-        const { loaded } = this.state;
-
-        const Stats = ({children}) => (
-            <div className={ classes.stats }>
-                { children }
-            </div>
-        );
-
-        const searchQueryChange = (e) => {
-            this.setState({
-                ...this.state,
-                query: e.target.value,
-            });
-        };
-
-
-        const onSubmitSearch = async (e) => {
+    private onSubmitSearch = async (e) => {
       const { query } = this.state;
-          const { applyDatasetsFilters, applySubsetsFilters, applyDescriptorListsFilters, applyAccessionsFilters } = this.props;
+      const { applyDatasetsFilters, applySubsetsFilters, applyDescriptorListsFilters, applyAccessionsFilters, t, navigateTo } = this.props;
       // const { navigateTo, t } = this.props;
       e.preventDefault();
       if (query && query.length > 0) {
@@ -542,6 +524,29 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
       }
     };
 
+    private handleKeyPres = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Enter') {
+        this.onSubmitSearch(event);
+      }
+    };
+
+    public render() {
+        const { classes, t, serverInfo, lastNews } = this.props;
+        const { loaded } = this.state;
+
+        const Stats = ({children}) => (
+            <div className={ classes.stats }>
+                { children }
+            </div>
+        );
+
+        const searchQueryChange = (e) => {
+            this.setState({
+                ...this.state,
+                query: e.target.value,
+            });
+        };
+
         return (
             <PageLayout classes={ {root: classes.root } } withFooter>
                 <ScrollToTopOnMount/>
@@ -566,7 +571,7 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
                     </div>
                     <Grid item xs={ 12 }>
                         <div className={ classes.searchBox }>
-                            <form onSubmit={ onSubmitSearch }>
+                            <form onSubmit={ this.onSubmitSearch }>
                                 <div className={ classes.searchWrapper }>
                                     <div className={ classes.inputBorder }>
                                         <Select
@@ -606,12 +611,16 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
                                                 { t('public.p.welcome.search.scope.descriptors') }
                                             </MenuItem>
                                         </Select>
-                                        <Input type="text" onChange={ searchQueryChange } className={ classes.searchField }
+                                        <Input
+                                            type="text"
+                                            onChange={ searchQueryChange }
+                                            className={ classes.searchField }
                                             disableUnderline
                                             placeholder={ t(this.state.queryPlaceholder) }
+                                            onKeyPress={ this.handleKeyPres }
                                             endAdornment={
                                                 <InputAdornment disableTypography position="end" className={ classes.searchButton }>
-                                                   <Button type="button" onClick={ onSubmitSearch }>
+                                                    <Button type="button" onClick={ this.onSubmitSearch }>
                                                         <SearchIcon className={ classes.searchIcon }/>
                                                         <span className="search">{ t('common:action.search') }</span>
                                                     </Button>