Topic: 4.7.4 Material select searchable broken..

coreystinson2 pro asked 5 years ago


Click on search input within material-select element and the dropdown closes.

Can reproduce problem from your documentation on searchable material-select. https://mdbootstrap.com/docs/jquery/forms/select/#searchable


coreystinson2 pro answered 5 years ago


Have temporarily resolved this by adding the following lines to the bottom of the appendSearchInputOption method - problem may be linked to my ticket the other day ?

this.$searchInput.on("click", function(event) {
  event.stopPropagation();
});

root-nine priority commented 5 years ago

thx for the workaround


coreystinson2 pro answered 5 years ago


In case my previous answer wasn't clear, the workaround for this problem is to modify your "appendSearchInputOption" function to the following:

The new addition is the event.stopPropagation click event binding.

{
  key: "appendSearchInputOption",
  value: function appendSearchInputOption() {
    var placeholder = this.$nativeSelect.attr('searchable');
    this.$searchInput = $("<span class=\"search-wrap ml-2\"><div class=\"md-form my-0\"><input type=\"text\" class=\"search form-control w-100 d-block mb-0\" placeholder=\"".concat(placeholder, "\"></div></span>"));
    this.$materialOptionsList.append(this.$searchInput);
    this.$searchInput.on("click", function(event) {
      event.stopPropagation();
    });
  }
}

aungkohein pro commented 5 years ago

Perfect! You saved my life! Works perfect now. Thank you..


Piotr Glejzer staff commented 5 years ago

HI,
thanks for a post, if you will add this event.StopPropagation() also to the end of _onToggleAllClick method it will be fix 'select all' button.
Best,
Piotr



This issue is already known to us. We'll fix it in the nearest future


aungkohein pro commented 5 years ago

hi! any update on this? It was working initially and suddenly, all my clients mdb-select got issue. I'm using downloaded mdb copy, how did it affect?

Please do kindly help to fix this soonest because it's a show stopper. Thank you!


coreystinson2 pro commented 5 years ago

Check my previous comment for a work-around which resolves the issue in it's entirety. MDB v4.7.4


aungkohein pro commented 5 years ago

This way ya?

  key: "appendMaterialOptionsList",
  value: function appendMaterialOptionsList() {
    if (this.isSearchable) {
      this.appendSearchInputOption();
      //Temporary Fix
      this.$searchInput.on("click", function(event) {
          event.stopPropagation();
        });  
    }

But I needed to click 2x to activate the select box.


coreystinson2 pro commented 5 years ago

Nah bro we're talking about two different issues here. This ticket was opened as the "searchable" directive was not working with the element. When you click on the element after opening the select dropdown it immediately closes, my previous comment addressed how to fix this.

Your problem was fixed by updating mdb.js to version 4.7.4 - download the latest package available from your accounts page.


aungkohein pro commented 5 years ago

Understand your thread now. What I'm facing is when Search box in mdb-select searchable is clicked into, it will automatically close, rather than when clicking on the select input. any idea to fix this? you can check out:

Select with label and search box" (https://mdbootstrap.com/docs/jquery/forms/select/)


coreystinson2 pro commented 5 years ago

I just added another comment explaining the first better - you've put the stopPropagation call under the wrong function. It's not "appendMaterialOptionsList" it's "appendSearchInputOption"https://mdbootstrap.com/support/other/4-7-4-material-select-searchable-broken/#


coreystinson2 pro commented 5 years ago

I just added another comment explaining the first better - you've put the stopPropagation call under the wrong function. It's not "appendMaterialOptionsList" it's "appendSearchInputOption"



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: Other
  • MDB Version: -
  • Device: .
  • Browser: Chrome 73.0.3683.86
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: Yes