search bar: fix focus vs click bug and inactive button

inveniosoftware · Sep 13, 2023 · bb72ca0 · bb72ca0
1 parent 125d2a6
commit bb72ca0
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/..._search_ui/assets/semantic-ui/js/invenio_search_ui/components/MultipleOptionsSearchBar.js b/..._search_ui/assets/semantic-ui/js/invenio_search_ui/components/MultipleOptionsSearchBar.js
@@ -55,6 +55,11 @@ export class MultipleOptionsSearchBar extends Component {
     this.setState({ queryString: value });
   };
 
+  handleFocus = (e) => {
+    e.persist();
+    if(e.target.nodeName === "BUTTON") this.handleOnSearchClick();
+  }
+
   render() {
     const { placeholder, options } = this.props;
     const { queryString } = this.state;
@@ -74,6 +79,7 @@ export class MultipleOptionsSearchBar extends Component {
         onResultSelect={this.handleOnResultSelect}
         onSearchChange={this.handleOnSearchChange}
         resultRenderer={(props) => resultRenderer(props, queryString)}
+        onFocus={this.handleFocus}
         results={options}
         value={queryString}
         placeholder={placeholder}
@@ -108,11 +114,11 @@ MultipleOptionsSearchBar.defaultProps = {
 export class MultipleOptionsSearchBarCmp extends Component {
   /** Multiple options searchbar to be wrapped with RSK context
    */
-  onBtnSearchClick = (e, { result }) => {
+  onBtnSearchClick = (e, data) => {
+    const { result } = data || {};
     const { queryString, updateQueryState, currentQueryState } = this.props;
     const { defaultOption } = this.props;
-    const { value: url } = result;
-    const destinationURL = url || defaultOption.value;
+    const destinationURL = result?.value || defaultOption.value;
 
     if (window.location.pathname === destinationURL) {
       updateQueryState({ ...currentQueryState, queryString });
@@ -126,6 +132,11 @@ export class MultipleOptionsSearchBarCmp extends Component {
     onInputChange(value);
   };
 
+  handleFocus = (e) => {
+    e.persist();
+    if(e.target.nodeName === "BUTTON") this.onBtnSearchClick();
+  }
+
   render() {
     const { placeholder, queryString, options } = this.props;
     const button = (
@@ -145,6 +156,7 @@ export class MultipleOptionsSearchBarCmp extends Component {
         onResultSelect={this.onBtnSearchClick}
         onSearchChange={this.handleOnSearchChange}
         resultRenderer={(props) => resultRenderer(props, queryString)}
+        onFocus={this.handleFocus}
         results={options}
         value={queryString}
         placeholder={placeholder}