Mateusz Lazaru staff commented 1 year 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 premium commented 1 year 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.

Mateusz Lazaru staff commented 1 year ago

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