FIX: Fix form_elements dropdown menu (deselect all)

CHANGELOG.md

@@ -36,6 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- #212 - form_elements: Drop-down menu shows wrong value after clicking "None"
 - #202 - Make filter fields in edit mode toolbox visible
 - #117 - Reload data model after adding an RT or a Property
 * #214 - Paging panel is hidden.

Makefile

@@ -218,10 +218,10 @@ $(LIBS_DIR)/fonts: unzip
 	ln -s $(LIBS_DIR)/bootstrap-icons-1.4.1/fonts/ $@
 
 $(LIBS_DIR)/js/bootstrap.js: unzip $(LIBS_DIR)/js
-	ln -s $(LIBS_DIR)/bootstrap-5.0.0-beta3-dist/js/bootstrap.min.js $@
+	ln -s $(LIBS_DIR)/bootstrap-5.0.1-dist/js/bootstrap.min.js $@
 
 $(LIBS_DIR)/css/bootstrap.css: unzip $(LIBS_DIR)/css
-	ln -s $(LIBS_DIR)/bootstrap-5.0.0-beta3-dist/css/bootstrap.min.css $@
+	ln -s $(LIBS_DIR)/bootstrap-5.0.1-dist/css/bootstrap.min.css $@
 
 $(LIBS_DIR)/css/bootstrap-icons.css: unzip $(LIBS_DIR)/css
 	ln -s $(LIBS_DIR)/bootstrap-icons-1.4.1/bootstrap-icons.css $@

misc/unit_test_http_server.py

@@ -153,5 +153,5 @@ class UnitTestHTTPServer(HTTPServer):
         os._exit(self._exit_code)#pylint: disable=protected-access
 
 
-UnitTestHTTPServer(server_address=('127.0.0.1', int(sys.argv[1])),
+UnitTestHTTPServer(server_address=('0.0.0.0', int(sys.argv[1])),
                    timeout=float(sys.argv[2]), ignore_done=(sys.argv[3] == "True")).start()

src/core/css/webcaosdb.css

@@ -746,3 +746,13 @@ details p {
 .caosdb-f-map-panel .leaflet-container {
     height: 500px;
 }
+
+.caosdb-v-field .bootstrap-select button {
+    border: 1px solid #ced4da;
+    background-color: #FFF;
+}
+
+.caosdb-v-field > div {
+    margin-top: auto;
+    margin-bottom: auto;
+}

src/core/js/form_elements.js

@@ -519,7 +519,7 @@ var form_elements = new function () {
         let label = this._make_input_label_str(config);
         let loading = $(createWaitingNotification("loading..."))
             .addClass("caosdb-f-field-not-ready");
-        let input_col = $('<div class="col-sm-9"/>');
+        let input_col = $('<div class="caosdb-f-property-value col-sm-9"/>');
 
         input_col.append(loading);
         this._query(config.query).then(async function (entities) {
@@ -559,7 +559,6 @@ var form_elements = new function () {
             select_picker_options["liveSearchNormalize"] = true;
             select_picker_options["liveSearchPlaceholder"] = "search...";
         }
-        console.log(select)
         $(select).selectpicker(select_picker_options);
         $(select).selectpicker("val", value);
         this.init_actions_box(field);
@@ -577,7 +576,7 @@ var form_elements = new function () {
         if (actions_box.length === 0) {
             actions_box = $(`<div class="bs-actionsbox">
                         <div class="btn-group btn-group-sm d-grid">
-                            <button type="button" class="actions-btn btn-secondary bs-deselect-all btn btn-light">None</button>
+                            <button type="button" class="actions-btn bs-deselect-all btn btn-light">None</button>
                         </div>
                     </div>`)
                 .hide();
@@ -599,9 +598,11 @@ var form_elements = new function () {
             actions_box
                 .find(".bs-deselect-all")
                 .click((e) => {
-                    select.val(null)
-                        .selectpicker("render")
-                        .parent().toggleClass("open", false);
+                    select
+                        .selectpicker("val", null);
+                    select
+                        .selectpicker("render");
+                    select.dropdown("hide");
                     select[0].dispatchEvent(form_elements.field_changed_event);
                 });
         }
@@ -1297,7 +1298,7 @@ var form_elements = new function () {
      */
     this._make_field_wrapper = function (name) {
         caosdb_utils.assert_string(name, "param `name`");
-        return $('<div class="row caosdb-f-field" data-field-name="' + name + '" />')[0];
+        return $('<div class="row caosdb-f-field caosdb-v-field" data-field-name="' + name + '" />')[0];
     }
 
     /**