SearchBar: autofocus prop

inveniosoftware · Oct 9, 2020 · dce4559 · dce4559
1 parent 766cffd
commit dce4559
Showing 1 changed file with 47 additions and 26 deletions.
diff --git a/src/lib/components/SearchBar/SearchBar.js b/src/lib/components/SearchBar/SearchBar.js
@@ -43,6 +43,7 @@ class SearchBar extends Component {
 
   render() {
     const {
+      autofocus,
       executeSearch,
       onBtnSearchClick,
       onInputChange,
@@ -52,6 +53,7 @@ class SearchBar extends Component {
     } = this.props;
     return (
       <Element
+        autofocus={autofocus}
         executeSearch={executeSearch || this.executeSearch}
         onBtnSearchClick={onBtnSearchClick || this.onBtnSearchClick}
         onInputChange={onInputChange || this.onInputChange}
@@ -65,6 +67,7 @@ class SearchBar extends Component {
 }
 
 SearchBar.propTypes = {
+  autofocus: PropTypes.bool,
   executeSearch: PropTypes.func,
   onBtnSearchClick: PropTypes.func,
   onInputChange: PropTypes.func,
@@ -76,6 +79,7 @@ SearchBar.propTypes = {
 };
 
 SearchBar.defaultProps = {
+  autofocus: true,
   executeSearch: null,
   onBtnSearchClick: null,
   onInputChange: null,
@@ -92,31 +96,48 @@ const SearchBarUncontrolled = (props) => (
   <SearchBar key={props.queryString} {...props} />
 );
 
-const Element = ({ overridableId, ...props }) => {
-  const {
-    placeholder,
-    queryString,
-    onBtnSearchClick,
-    onInputChange,
-    onKeyPress,
-  } = props;
-  return (
-    <Overridable id={buildUID('SearchBar.element', overridableId)} {...props}>
-      <Input
-        action={{
-          content: 'Search',
-          onClick: onBtnSearchClick,
-        }}
-        fluid
-        placeholder={placeholder || 'Type something'}
-        onChange={(event, { value }) => {
-          onInputChange(value);
-        }}
-        value={queryString}
-        onKeyPress={onKeyPress}
-      />
-    </Overridable>
-  );
-};
+class Element extends Component {
+  componentDidMount() {
+    const { autofocus } = this.props;
+    if (autofocus && this.focusInput) {
+      this.focusInput.focus();
+    }
+  }
+
+  render() {
+    const {
+      onBtnSearchClick,
+      onInputChange,
+      onKeyPress,
+      overridableId,
+      placeholder,
+      queryString,
+    } = this.props;
+
+    return (
+      <Overridable
+        id={buildUID('SearchBar.element', overridableId)}
+        {...this.props}
+      >
+        <Input
+          action={{
+            content: 'Search',
+            onClick: onBtnSearchClick,
+          }}
+          fluid
+          placeholder={placeholder || 'Type something'}
+          onChange={(event, { value }) => {
+            onInputChange(value);
+          }}
+          value={queryString}
+          onKeyPress={onKeyPress}
+          ref={(input) => {
+            this.focusInput = input;
+          }}
+        />
+      </Overridable>
+    );
+  }
+}
 
 export default Overridable.component('SearchBar', SearchBarUncontrolled);