Select component passed to Vanilla JS. Handle options and normally fix all known issues.

[Tim-arts]

Hi everyone,

Related to #2514, I rebase this PR passing to Vanilla JS for being less complicated.

So, this PR should fix all these issues :

#2274
#1707
#1296
#2535
#2522
#2548
#2554
#2536
#2436
#2522
#2652
#2602
#2575
#2285
#1638
#1393
#1077
#2402

This issue can't be fixed, because this is a browser bug and it's seems we can't do anything for now but wait for a fix : #2448

The PR allow now some options like :

• hover : it's the same option as the dropdown
• belowOrigin : it's the same option as the dropdown
• maxHeight : Define the max height of the dropdown
• maxWidth: define the max width of the dropdown
• arrangement : define the direction of the opening dropdown ((top or bottom)

I updated the documentation for being more understandable, so now you can init a select like this :

For init with options:

$('select').material_select({
    hover: false,
    belowOrigin: true,
    maxWidth: 500, // width 500px
    maxHeight: 200, // height 200px
    arrangement: 'top' // Open the dropdown to top
});

For init :

$('select').material_select();

For destroy :

$('select').material_select('destroy');

There is now some calls for update the select instead of destroy and recreate it :

$('select').val(value).trigger('update'); // for single select
$('select').val([value1, value2]).trigger('update'); // for multiple select

So, select is using now some same functionalities of the dropdown component, feel free to match the remaining options like induration, outduration, constrainWidth, gutter and alignement.

This PR adds the possibility to use optgroups with Materialize Multiple Select, there is some working example :
https://jsfiddle.net/TyrionGraphiste/5deezjj0/1/

The code passed to Vanilla JS, so it's possible than some people encounter errors because I don't use polyfill. As mentionned in #2522 the polyfills should be global and accessible from each component, however it will give a real bad code if every component has its own polyfill and sometime the same several times.

One last thing, Jasmine tests should be updated because some changes.

Hope it will fix all issues we are encounter with this component.

[rbizarra]

Do you have any date for this to be available?
Thank you

[Tim-arts]

Hi, I got no response since the PR so for now I just wait like the 166 others.

[rbizarra]

Don't get me wrong Tyrion, I was just asking because this is great, and was hoping to use this on my website as soon as is available.

[Tim-arts]

If you want to use it you can modify the component modified in the PR.

[rbizarra]

Can you confirm that the 'onchange' listener for select objects is working?
Before i changed the files, it was working, right now i can't make it work

[Tim-arts]

Closed because no response in 1 month.

[Thanood]

Sad.. Looks like a great fix.

[Tim-arts]

@Thanood Thanks, but you can load an overload file if you really want to use it.

I encourage anyone to see this message repository to drop it because it is not maintained properly and errors stack every day without anything being done, at least not fast enough.

They could organize their pull request or just give an answer but they are choosing to remain silent, to me it's disrespectful.

[Tim-arts]

@badaro42 Sorry, I'm just seeing your comment right now, I provide a fix on my fork. But I don't know that will be useful now.

[zanechua]

Ah.. I didn't see this.

Actually, we could just use your version of MaterializeCSS from your master branch right?

[Tim-arts]

Yes it should works but if you encounter an issue don't hesitate to report it, I'll fix.

[zanechua]

It's a shame they chose to ignore your PR.

I'll checkout your version and take a look.

Thanks @TyrionGraphiste

[tomscholz]

@TyrionGraphiste Would you move the changes that you made to the forms.html to the jade file in /jade/page-contents ? And why did you edit the dropdown.js ? I thought just rewrote the select plugin?

[Tim-arts]

It is a closed PR. I won't ever work for this repo.