Fix select custom value for queryselect widget (#2413)

* Fix select custom value in query widget

* Changelog updated

---------

Co-authored-by: Jordi Puiggené <jp@naralabs.com>

CHANGES.rst

@@ -4,6 +4,7 @@ Changelog
 2.5.0 (unreleased)
 ------------------
 
+- #2413 Fix select custom value for queryselect widget
 - #2412 Layered listing searchable text adapter lookup
 - #2409 Fix empty results get interpreted as 0.0 by 2-Dimensional-CSV importer
 - #2410 Fix order of choices for interims on data entry is not preserved

webpack/app/widgets/components/SearchResults.js

@@ -75,7 +75,15 @@ class SearchResults extends React.Component {
    * @returns {Boolean} true if there are results, false otherwise
    */
   has_results() {
-    return this.get_results().length > 0;
+    let results = this.get_results();
+    let searchterm = this.props.searchterm;
+    let allow_user_value = this.props.allow_user_value;
+
+    // allow to select the typed in value
+    if (searchterm.length > 0 && allow_user_value) {
+      return true;
+    }
+    return results.length > 0;
   }
 
   /*
@@ -142,6 +150,10 @@ class SearchResults extends React.Component {
   build_rows() {
     let rows = [];
     let results = this.get_results();
+    let searchterm = this.props.searchterm;
+    let allow_user_value = this.props.allow_user_value;
+
+    // Build columns for the search results
     results.forEach((result, index) => {
       let value = this.get_result_value(result);
       let cursor = value ? "pointer" : "not-allowed";
@@ -158,6 +170,24 @@ class SearchResults extends React.Component {
         </tr>
       );
     });
+
+    // Add additional row to select the typed in searchterm
+    if (allow_user_value && searchterm.length > 0) {
+      let index = results.length + 1;
+      rows.push(
+        <tr value={searchterm}
+            index={index}
+            title={searchterm}
+            style={{cursor: "pointer"}}
+            className={this.props.focused == index ? "table-active": ""}
+            onMouseOver={this.on_mouse_over}
+            onClick={this.on_select}>
+          <td className="font-italic text-secondary" colspan={this.props.columns.length}>
+            {_t("Select")}: <span className="text-info">{searchterm}</span>
+          </td>
+        </tr>
+      );
+    }
     return rows
   }
 

webpack/app/widgets/queryselect/widget.js

@@ -452,11 +452,6 @@ class QuerySelectWidgetController extends React.Component {
       } else {
         this.deselect(value);
       }
-    } else {
-      if (searchvalue && this.state.allow_user_value) {
-        // allow to set the current searchvalue
-        this.select(searchvalue);
-      }
     }
   }
 
@@ -777,6 +772,7 @@ class QuerySelectWidgetController extends React.Component {
             searchterm={this.state.searchterm}
             width={this.state.results_table_width}
             results={this.state.results}
+            allow_user_value={this.state.allow_user_value}
             loading={this.state.loading}
             focused={this.state.focused}
             count={this.state.count}