form_elements.make_select_input needs to be reinitialized manually.

Summary

When adding a select input to a form created with form_elements, the input remains hidden until initialized by form_elements.init_select_picker. This is a known problem, see in-code comment in form_elements.init_select_picker.

Expected Behavior

The select input should be visible if configured in the form.

Actual Behavior

It is lacking the correct bootstrap classes and thus has display: none

Steps to Reproduce the Problem

Create a form containing a select input, e.g. by

const formConfig = {
  fields: [{
    name: "task",
    label: "Select a task.",
    type: "select",
    options: [{
      label: "Default",
      value: "default"
    }, {
      label: "Test",
      value: "test"
    }]
  }]
}
const form = form_elements.make_form(form_config);
const modal = form_elements.make_form_modal(form);
navbar.add_tool("Test", "Analyses", {
  title: title,
  callback: () => $(modal).modal("toggle")
});

The resulting form will have the correct field, but the select input remains hidden. Adding the manual initialization via

const select = $(modal).find("[name=task].selectpicker");
form_elements.init_select_picker(select[0].parentElement, undefined);

solves the problem. This cannot be done within the make_form or make_select_input functions, since the selectpicker element needs to be part of the dom tree to work.

Specifications

• Version: current dev
• Platform: any

Possible fixes

None. selectpicker has been without a maintainer for four years and we will abandon this when using more and more react form fields.