Topic: Reinitialize a select component with working filter

Jordan Mack pro asked 1 year ago


*_Expected behavior_*Filter within select box properly filters options

*_Actual behavior_*On click of the filter within the select does not allow typing (almost as if it is disabled without the css showing so)

Resources (screenshots, code snippets etc.)

The function shown below is called on jquery document ready event handler.

JavaScript:

function fetchEmployees() {
  return fetch(FETCH + '/generic/employees.php')
    .then((resp) => {
      if (resp.ok) return resp.json();
      else throw new Error("Something went wrong");
    })
    .then((p) => {

      //  puts array into html formatted options
      let employeeOptions = Options.formatOptions(p.map(u => [u.id, [u.first, u.last].join(" ")]),
        'Employee');

      $('#addNewDeliverableEmployee').empty().append(employeeOptions);

      mdb.Select.getInstance(selects.addNewDeliverableEmployee).dispose();

      new mdb.Select(selects.addNewDeliverableEmployee, {
        filter: true
      });

    }).catch((e) => {
      toastr.error(e);
    });
}

HTML:

<div id="addNewDeliverableModal" class="modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add Deliverable</h5>
        <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row mb-2">
          <div class="col-2">
            <label class="form-label">Employee</label>
          </div>
          <div class="col">
            <select id="addNewDeliverableEmployee" data-mdb-filter="true" class="select"> </select>
          </div>
        </div>
        <div class="row mb-2">
          <div class="col-2">
            <label class="form-label">Sub-project</label>
          </div>
          <div class="col">
            <select id="addNewDeliverableSubproject" data-mdb-filter="true" class="select"></select>
          </div>
        </div>
        <div class="row mb-2">
          <div class="col-2">
            <label class="form-label">Deliverable</label>
          </div>
          <div class="col">
            <select id="addNewDeliverableDeliverable" data-mdb-filter="true" class="select"></select>
          </div>
        </div>
        <div class="row mb-2">
          <div class="col-2">
            <label class="form-label">Hours</label>
        </div>
          <div class="col">
            <input id="addNewDeliverableHours" class="form-control" type="number" />
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
        Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>

FYI:

  • No errors are caught in my function
  • I have remade toastr class from mdb 4. I am using mdb 5 (withjquery) to clear confusion.
  • removing select class and refreshing does not initiate mdb.Select component but manually calling it does (new mdb.Select) (still without the filter working)

Michał Duszak staff commented 1 year ago

Try setting the container option, which should contain the selecor of an element in which the Select dropdown will be rendered. Docs which can be referenced: https://mdbootstrap.com/docs/standard/forms/select/#section-search-inside-modal

new mdb.Select(selects.addNewDeliverableEmployee, { filter: true, container: ".modal" });



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.8.0
  • Device: Intel x86
  • Browser: Chrome
  • OS: Ubuntu 20.04
  • Provided sample code: Yes
  • Provided link: No