Merge pull request #590 from ydcjeff/issue-281

feat: auto resize search bar
cofacts · Dec 24, 2024 · 7116883 · 7116883
2 parents ed528ce + b945378
commit 7116883
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/components/SearchPageJumbotron.js b/components/SearchPageJumbotron.js
@@ -2,14 +2,15 @@ import { useRef, useEffect, memo } from 'react';
 import { useRouter } from 'next/router';
 import { t } from 'ttag';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
-import { Tabs, Tab, Box, Container } from '@material-ui/core';
+import { Tabs, Tab, Box, Container, TextareaAutosize } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 
 const useStyles = makeStyles(theme => ({
   jumbotron: {
     background: '#202020',
   },
   search: {
+    alignSelf: 'flex-start',
     color: theme.palette.common.white,
     paddingRight: theme.spacing(3),
   },
@@ -53,6 +54,7 @@ const useStyles = makeStyles(theme => ({
     outline: 'none',
     color: theme.palette.common.white,
     background: 'transparent',
+    paddingRight: theme.spacing(4),
   },
   submit: {
     display: 'none',
@@ -95,7 +97,7 @@ function SearchPageJumbotron() {
     });
   };
 
-  const { q } = query;
+  const { q = '' } = query;
   useEffect(() => {
     textareaRef.current.value = q;
   }, [q]);
@@ -109,11 +111,18 @@ function SearchPageJumbotron() {
         <form onSubmit={onSearch} className={classes.form}>
           <h2 className={classes.search}>{t`Searching`}</h2>
           <Box flex={1} className={classes.inputArea}>
-            <textarea
+            <TextareaAutosize
               ref={textareaRef}
               name="search"
               className={classes.input}
-              rows={1}
+              minRows={1}
+              onKeyDown={e => {
+                // enter to trigger search, so disable default line breaking
+                if (e.key == 'Enter') {
+                  e.preventDefault();
+                  e.target.form.requestSubmit();
+                }
+              }}
             />
             <button type="submit" className={classes.submit}>
               <SearchIcon />