Auto-hide non-multivalued reference widget input on value selection

CHANGES.rst

@@ -4,6 +4,7 @@ Changelog
 2.5.0 (unreleased)
 ------------------
 
+- #2363 Auto-hide non-multivalued reference widget input on value selection
 - #2359 Improve sample create performance
 - #2361 Fix KeyError if registry key not found
 - #2358 Add confirmation when unlinking reference

src/senaite/core/behaviors/label.py

@@ -77,7 +77,6 @@ class ILabelSchema(model.Schema):
         search_wildcard=True,
         multi_valued=True,
         allow_user_value=True,
-        hide_input_after_select=False,
         query={
             "portal_type": "Label",
             "is_active": True,

src/senaite/core/browser/widgets/queryselect.py

@@ -55,7 +55,6 @@ class QuerySelectWidget(StringWidget):
         "value_query_index": "title",
         "padding": 3,
         "display_template": None,
-        "hide_input_after_select": False,
         "clear_results_after_select": False,
         "results_table_width": "500px",
     })
@@ -112,8 +111,6 @@ def get_input_widget_attributes(self, context, field, value):
             "data-multi_valued": getattr(self, "multi_valued", True),
             "data-disabled": getattr(self, "disabled", False),
             "data-readonly": getattr(self, "readonly", False),
-            "data-hide_input_after_select": getattr(
-                self, "hide_input_after_select", True),
             "data-clear_results_after_select": getattr(
                 self, "clear_results_after_select", False),
         }

src/senaite/core/extender/label.py

@@ -45,7 +45,6 @@ class LabelSchemaExtender(object):
                 search_wildcard=True,
                 multi_valued=True,
                 allow_user_value=True,
-                hide_input_after_select=False,
                 i18n_domain="senaite.core",
                 query={
                     "portal_type": "Label",

src/senaite/core/z3cform/widgets/queryselect/README.md

@@ -100,10 +100,6 @@ widget directive as *additional arguments*:
              Note: This option affects the length of the batch navigation to
                    avoid horizontal overflow for more than e.g. 50 pages.
 
-- `hide_input_after_select`: Controls if the search input field should be rendered after a value was selected
-                             Default: `False`
-                             Note: Only used if for single valued fields
-
 
 # Full example
 
@@ -128,7 +124,6 @@ This example shows how the widget can be used with most of the described setting
             search_wildcard=True,
             multi_valued=False,
             allow_user_value=True,
-            hide_input_after_select=True,
             columns=[
                 {
                     "name": "patient_id",

src/senaite/core/z3cform/widgets/queryselect/widget.py

@@ -160,8 +160,6 @@ def get_input_widget_attributes(self):
             "data-multi_valued": getattr(self, "multi_valued", True),
             "data-disabled": getattr(self, "disabled", False),
             "data-readonly": getattr(self, "readonly", False),
-            "data-hide_input_after_select": getattr(
-                self, "hide_input_after_select", True),
             "data-clear_results_after_select": getattr(
                 self, "clear_results_after_select", False),
         }

webpack/app/scss/forms.scss

@@ -121,3 +121,9 @@ form[name='edit_form'] {
     margin-bottom: 0;
   }
 }
+
+form[name=analysisrequest_add_form] {
+  .field {
+    margin-bottom: 0;
+  }
+}

webpack/app/widgets/components/SelectedValues.js

@@ -76,7 +76,7 @@ class SelectedValues extends React.Component {
             <button value={value}
                     data-toggle="confirmation"
                     data-title={_t("Unlink reference?")}
-                    className="btn btn-sm btn-link-danger"
+                    className="btn btn-sm p-0 ml-2"
                     onClick={this.on_deselect}>
               <i className="fas fa-times-circle"></i>
             </button>

webpack/app/widgets/queryselect/widget.js

@@ -54,7 +54,6 @@ class QuerySelectWidgetController extends React.Component {
       "columns",  // columns to be displayed in the results popup
       "display_template",  // template to use for the selected values
       "multi_valued",  // if true, more than one value can be set
-      "hide_input_after_select",  // only for single valued fields to hide the input after selection
       "clear_results_after_select",  // clear results after value select
       "disabled",  // if true, the field is rendered as not editable
       "readonly",  // if true, the field is rendered as not editable
@@ -236,7 +235,13 @@ class QuerySelectWidgetController extends React.Component {
    * @returns {Boolean} true/false if the search field is rendered
    */
   show_search_field() {
-    if (!this.state.multi_valued && this.state.values.length > 0 && this.state.hide_input_after_select) {
+    if (this.state.disabled) {
+      return false;
+    }
+    if (this.state.readonly) {
+      return false;
+    }
+    if (!this.state.multi_valued && this.state.values.length > 0) {
       return false;
     }
     return true;