Including hidden options in search results on a select

mlazaru staff commented 2 years ago

You have a point. Search does not emit any onChange or similar event. We will discuss the addition of such event in our team as it might be usefull also in other cases.

Sushrut Bidwai pro premium commented 2 years ago

FWIW This is what I ended up doing, quite hacky.

(function() { const selectEl = document.getElementById('locationSelector');

selectEl.addEventListener('open.mdb.select', (e) => {
    var optionGroup = document.querySelector('.select-option-group');
    let check = function() {
      setTimeout(function () {
        if (optionGroup === null) {
          optionGroup = document.querySelector('.select-option-group');
          check();
      }
        else {
          optionGroup.parentElement.parentElement.classList.add('hide_extra_options_in_select');
        }
      }, 50);
    };
    check();
});    

})(); .hide_extra_options_in_select { overflow-y: hidden !important;}

Basically leave all options as visible, but when the select is open, set overflow-y to hidden so that only top 10 options are visible and there is no scroll bar.

mlazaru staff commented 2 years ago

Thank you for sharing your code! I hope we will be able to make it easier soon.