material-Select Editable - fails after choosing option

Topic: material-Select Editable - fails after choosing option

cdenby pro asked 3 years ago

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.)

https://youtu.be/HoOdCgiCBis

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.

Add comment

cdenby pro answered 3 years ago

0 0 Best answer

<p>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 </p>

<ol>
<li>Add the click handler to the i to trigger the change event on the select</li>
<li>If I click on an option and then try to manually add, I get duplicate change events on the select</li>
<li>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.</li>
</ol>

<p>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:
<a href="https://mdbootstrap.com/snippets/jquery/cdenby/2906623#js-tab-view" target="_blank">https://mdbootstrap.com/snippets/jquery/cdenby/2906623#js-tab-view</a></p>

Please insert min. 20 characters.

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 3 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

Add comment

cdenby pro answered 3 years ago

0 0 Best answer

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 3 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

Please insert min. 15 characters.

Add comment

Marcin Luczak staff answered 3 years ago