Topic: MDB Select, searchable, cannot activate search input

saburo premium asked 6 months ago


I am adding dynamycally selects to a modal div, selects work, but the search option is not clickable, nor editable. I have seen some solution with .focus, but did not appear to do anythng tfor me, plus the code in those solution is quite old and did not run as is in my situation.

this is part of the code I use :

   case "category":
            var catData = await mdm.getCategoryValues(fld.categoryId),
                options = { filter: true , displayedLabels : 9, formWhite : true};
            mdmField = $("<select/>", { class: "select mdmField mdmCategory", id: "fld_" + fld.categoryId })
                .appendTo(container);
            $("<label/>", { class: "form-label select-label", text: fld.description }).appendTo(container);
            if (!fld.isMandatory) {
                $("<option/>", { value: "", text: "--- N.A. ---" }).appendTo(mdmField);
                options.clearButton = true;
            } else $("<option/>", { value: "", text: "--- Please Select a Value ---" }).appendTo(mdmField);
            Object.keys(catData.values).forEach(cval => {
                //TODO: manage hierarchies
                $("<option/>", { value: cval, text: catData.values[cval].description }).appendTo(mdmField);
            });
            if (mdmField.length == 1) {
                new window.mdb.Select(mdmField[0], options);
                mdmField[0].addEventListener("valueChange.mdb.select", (ev) => validateEditForm(container , ev.target));
            }
            break;

abd this is whay=t I get ( the search-input is inactive, checked properties in chrome dev tools, cannot see anything weird)

enter image description here


mlazaru staff answered 6 months ago


saburo premium answered 6 months ago


Yes, it worked!

Basically I had to set the data-mdb-container property to the select object. I tried via APIs passing it as container, but that did not work.

mdmField = $("<select/>", { class: "select mdmField mdmCategory","data-mdb-container":"#modalEditBody", id: "fld_" + fld.categoryId })
                .appendTo(container);


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: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.1.0
  • Device: PC
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No