Topic: 4.7.4 Material select searchable broken..
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
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();
});
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"
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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