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)