From 5d07b4153cd87b86ae7a4abaa8705d181fd5bd77 Mon Sep 17 00:00:00 2001
From: Jenny Bonsak <jenny.bonsak@gmail.com>
Date: Wed, 13 Sep 2023 17:08:41 +0200
Subject: [PATCH] search bar: fix focus vs click bug and inactive button

---
 .../components/MultipleOptionsSearchBar.js     | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/components/MultipleOptionsSearchBar.js b/invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/components/MultipleOptionsSearchBar.js
index dac0f230..a3bff090 100644
--- a/invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/components/MultipleOptionsSearchBar.js
+++ b/invenio_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}