fix some issues with reset search button breaking css (#556)

ExpediaDotCom · Apr 2, 2020 · 537b9a2 · 537b9a2
1 parent b4f9c7b
commit 537b9a2
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git a/src/components/universalSearch/searchBar/autosuggest.jsx b/src/components/universalSearch/searchBar/autosuggest.jsx
@@ -44,6 +44,7 @@ const ESC = 27;
 export default class Autosuggest extends React.Component {
     static propTypes = {
         uiState: PropTypes.object.isRequired,
+        history: PropTypes.object.isRequired,
         options: PropTypes.object,
         search: PropTypes.func.isRequired,
         serviceStore: PropTypes.object.isRequired,
@@ -486,7 +487,10 @@ export default class Autosuggest extends React.Component {
         this.inputRef.value = '';
         this.props.uiState.pendingQuery = [];
         this.props.uiState.queries = [];
-        this.props.search();
+        this.setState({
+            inputError: false
+        });
+        this.props.history.push('/');
     }
 
     render() {
@@ -509,16 +513,16 @@ export default class Autosuggest extends React.Component {
                             onFocus={this.handleFocus}
                             placeholder={uiState.pendingQuery.length ? '' : 'Search tags and services...'}
                         />
-                    </div>
-                    {(uiState.queries.length > 0 || uiState.pendingQuery.length > 0) &&
+                        {(uiState.queries.length > 0 || uiState.pendingQuery.length > 0) &&
                         <div
                             className="usb-reset-button"
                             role="button"
                             tabIndex="-1"
                             onClick={this.resetSearch}
                         >Reset Search
                         </div>
-                    }
+                        }
+                    </div>
                     <TimeWindowPicker uiState={uiState} />
                     <SearchSubmit handleSearch={this.handleSearch} />
                 </div>

diff --git a/src/components/universalSearch/searchBar/autosuggest.less b/src/components/universalSearch/searchBar/autosuggest.less
@@ -243,6 +243,6 @@
     text-decoration: underline;
     cursor: pointer;
     position: absolute;
-    right: 150px;
+    right: -80px;
     top: 10px;
 }
diff --git a/src/components/universalSearch/searchBar/searchBar.jsx b/src/components/universalSearch/searchBar/searchBar.jsx
@@ -33,6 +33,7 @@ const subsystems = (window.haystackUiConfig && window.haystackUiConfig.subsystem
 export default class SearchBar extends React.Component {
     static propTypes = {
         search: PropTypes.object.isRequired,
+        history: PropTypes.object.isRequired,
         handleSearch: PropTypes.func.isRequired
     };
 
@@ -66,7 +67,7 @@ export default class SearchBar extends React.Component {
     render() {
         return (
             <article className="universal-search-container container">
-                <Autosuggest search={this.handleSubmit} uiState={uiState} operationStore={OperationStore} serviceStore={ServiceStore} options={SearchableKeysStore.keys} />
+                <Autosuggest search={this.handleSubmit} history={this.props.history} uiState={uiState} operationStore={OperationStore} serviceStore={ServiceStore} options={SearchableKeysStore.keys} />
             </article>
         );
     }

diff --git a/src/components/universalSearch/universalSearch.jsx b/src/components/universalSearch/universalSearch.jsx
@@ -104,7 +104,7 @@ const UniversalSearch = observer(({location, history}) => {
         <article className="universal-search-panel">
             {window.haystackUiConfig.enableSSO && authenticationStore.timedOut ? <AuthenticationTimeoutModal /> : null}
             <Header />
-            <SearchBar search={search} handleSearch={handleSearch} />
+            <SearchBar history={history} search={search} handleSearch={handleSearch} />
             <Tabs search={search} tabProperties={tabProperties} handleTabSelection={handleTabSelection} history={history} location={location} />
             <Footer />
         </article>