Improve search bar (#4189)

superdesk · Feb 20, 2023 · 0710a4c · 0710a4c
1 parent 0c3fb49
commit 0710a4c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/scripts/core/ui/components/SearchBar/index.tsx b/scripts/core/ui/components/SearchBar/index.tsx
@@ -145,11 +145,14 @@ export default class SearchBar extends React.Component<IProps, IState> {
                             )
                             : (
                                 <ManualSearch
+                                    value={this.state.searchInputValue}
                                     actionButtons={actionButtons}
                                     onInputChange={(value) => this.setState({
                                         searchInputValue: value,
                                     })}
-                                    onSearch={() => this.props.onSearch(this.state.searchInputValue)}
+                                    onSearch={() => {
+                                        this.props.onSearch(this.state.searchInputValue);
+                                    }}
                                 />
                             )
                     }
@@ -160,6 +163,5 @@ export default class SearchBar extends React.Component<IProps, IState> {
 }
 
 SearchBar.defaultProps = {
-    timeout: 800,
     allowCollapsed: true,
 };
diff --git a/scripts/core/ui/components/SearchBar/manual.tsx b/scripts/core/ui/components/SearchBar/manual.tsx
@@ -5,21 +5,34 @@ interface IProps {
     onSearch(): void;
     onInputChange(value: string): void;
     actionButtons: React.ReactNode;
+    value: string;
 }
 
 export class ManualSearch extends React.PureComponent<IProps> {
+    inputRef: HTMLInputElement;
+
+    componentDidMount() {
+        if (this.props.value !== '' || this.props.value != null) {
+            this.inputRef.focus();
+        }
+    }
+
     render(): React.ReactNode {
         return (
             <div
                 className="sd-display--flex sd-flex--grow sd-flex--items-center sd-flex--align-self-stretch"
             >
                 <input
+                    ref={(e) => this.inputRef = e}
                     onKeyUp={(e) => {
                         if (e.key === 'Enter') {
                             this.props.onSearch();
                         }
                     }}
-                    onChange={(e) => this.props.onInputChange(e.target.value)}
+                    value={this.props.value}
+                    onChange={(e) => {
+                        this.props.onInputChange(e.target.value);
+                    }}
                     type="text"
                     placeholder={gettext('Search...')}
                 />