Topic: material-Select Editable - fails after choosing option
Expected behavior
When you have an Editable MDBSelect, it should allow for selection, or adding, without fail.
Actual behavior
I believe I'm seeing that if you add an option, then change the selection to another option, you can't dad an item or do anything else with the select - it's frozen. No error.
Resources (screenshots, code snippets etc.)
This 1 minute video is built out of the b4 version example on your website. The only code change I made to it was adding data-visible-options="-1". It's pretty clear that once you choose an option by clicking on it, the editable function renders the control locked.
The snippet is here https://mdbootstrap.com/snippets/jquery/cdenby/2894551 But as I said, it's just the sample that's on your website.
Hi @cdenby,
It really looks like it is bugged somehow. I have added this to our bug tracker list and the team shall decide when to add the fix for this issue.
Thank you for your reporting,
Regards, Marcin
Is there a list of events available in the materialSelect? Bootstrap has onShow and onShown. I might be able to build a work-around on this if I had access to those events.
I've added the trigger('change') on the icon, but it only works until you do a click on an option - then it's done.
If I had the onShown event, I may be able to do something...
Marcin Luczak staff commented 4 years ago
Unfortunately, we do not support onShow and onShown events. As a workaround for that I would recommend adding your own event listener to the input.select-dropdown element inside your material select component nad inside its callback run your functions:
$(document).ready(function() {
// Material Select
$('.mdb-select').materialSelect({
});
$('input.select-dropdown').on('click', function(e){ // your code }) })
Opened input element should contain class active so you can also check that condition inside your callback function.
Regards, Marcin
That would give me what I need to repair the onchange event, but I'm getting the trigger("click") happening multiple times, depending on whether a click-on-option event had occurred. The best I can get with this control is
- Add the click handler to the i to trigger the change event on the select
- If I click on an option and then try to manually add, I get duplicate change events on the select
- If I click on an option and then try to manually add, the i no longer closes the materialSelect. The change event happens (multiple times) but the select is locked open until you click elsewhere in the doc.
I've had to create my own editable materialSelect using multiple controls (A hidden div with an input and a button). If there are any suggestions on it, here is replacement snippet: https://mdbootstrap.com/snippets/jquery/cdenby/2906623#js-tab-view
Marcin Luczak staff commented 4 years ago
With the actual state of the editable Material Select, I think that you've created a great workaround for that issue. At the moment I cannot tell you exactly when the fix for that problem will be released so If you have any other issues or questions, please let me know.
Regards, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.19.2
- Device: PC
- Browser: Chrome
- OS: W10
- Provided sample code: No
- Provided link: Yes