Clone search input so that a focus is kept when opening the search view

Feature #14603

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/views-components/search-bar/search-bar-advanced-view.tsx b/src/views-components/search-bar/search-bar-advanced-view.tsx
index 05bdb9706301daa2f7f2f94c95fa80cdb7db73d1..b001cb3eb1f1920e0b08ec1f50ff95e4e9aea1fb 100644 (file)
--- a/src/views-components/search-bar/search-bar-advanced-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-view.tsx
@@ -27,7 +27,8 @@ type CssRules = 'container' | 'closeIcon' | 'label' | 'buttonWrapper'
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     container: {
         padding: theme.spacing.unit * 2,
-        borderBottom: `1px solid ${theme.palette.grey["200"]}`
+        borderBottom: `1px solid ${theme.palette.grey["200"]}`,
+        position: 'relative',
     },
     closeIcon: {
         position: 'absolute',

diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index 09b75bbf65893a7c811a75f563eebc8ffcd9f8c4..8d767b2b6affc816fcd57f2fcc94df7f2ca4c266 100644 (file)
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -150,10 +150,9 @@ export const SearchBarView = withStyles(styles)(
 
         render() {
             const { children, ...props } = this.props;
-            const { classes, isPopoverOpen } = props;
+            const { classes } = props;
             return (
-                <Paper
-                    className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container}>
+                <Paper className={classes.container}>
                     <div ref={this.viewAnchorRef}>
                         <form onSubmit={props.onSubmit}>
                             <SearchInput {...props} />
@@ -163,9 +162,13 @@ export const SearchBarView = withStyles(styles)(
                         {...props}
                         width={this.getViewWidth()}
                         anchorEl={this.viewAnchorRef.current}>
-                        {
-                            getView({ ...props })
-                        }
+                        <form onSubmit={props.onSubmit}>
+                            <SearchInput
+                                {...props}
+                                autoFocus
+                                disableClickHandler />
+                        </form>
+                        {getView({ ...props })}
                     </SearchViewContainer>
                 </Paper >
             );
@@ -179,16 +182,17 @@ export const SearchBarView = withStyles(styles)(
 
 );
 
-const SearchInput = (props: SearchBarViewProps) => {
+const SearchInput = (props: SearchBarViewProps & { disableClickHandler?: boolean; autoFocus?: boolean }) => {
     const { classes } = props;
     return <Input
+        autoFocus={props.autoFocus}
         className={classes.input}
         onChange={props.onChange}
         placeholder="Search"
         value={props.searchValue}
         fullWidth={true}
         disableUnderline={true}
-        onClick={e => handleInputClick(e, props)}
+        onClick={e => !props.disableClickHandler && handleInputClick(e, props)}
         onKeyDown={e => handleKeyDown(e, props)}
         startAdornment={
             <InputAdornment position="start">
@@ -213,14 +217,11 @@ const SearchInput = (props: SearchBarViewProps) => {
 const SearchViewContainer = (props: SearchBarViewProps & { width: number, anchorEl: HTMLElement | null, children: React.ReactNode }) =>
     <Popover
         PaperProps={{
-            style: {
-                width: props.width,
-                borderRadius: '0 0 4px 4px',
-            }
+            style: { width: props.width }
         }}
         anchorEl={props.anchorEl}
         anchorOrigin={{
-            vertical: 'bottom',
+            vertical: 'top',
             horizontal: 'center',
         }}
         transformOrigin={{