material-select retain "selected" state on second opening only

FHoulbreque commented 7 years ago

Using material-select dropdown directive, the selected option will show only if you select one option, then select the same one again in the dropdown.

Steps to reproduce

Open the select options.
No selected item is shown even if one is selected by default.
Select an option (or the default selected one)
Click to open again and Select the same option again (if you have selected the default selected one it will show as selected...)
Finally your new choice is visible as selected in the dropdown.
What exactly is supposed to happen

The selected option should happens on first click or with the default value

What exactly does happens

The selected option only shows on second click (or first for the default selected one)

<div input-field class="col s12 m6">
        <i class="material-icons prefix">store</i>
        <select id="job" name="job" ng-model="usrEdit.user_edit.user.job" ng-options="job.name as job.label for job in usrEdit.user_edit.jobs" material-select>
        </select>
    <label for="job">Rôle</label>
</div>

I tried the watch property but it changes nothing.

I could give you access to the related site but I can't post access code here. So either contact me in private or ask me what you need.

Thanks.

EDIT: NEW FOUND EVIDENCES

I were able to reprodcue this exact behavior from the Angularjs directives for Materialize official doc on selects !

The multiple example have as well this very same issue, but not as visible as the first. When you uncheck one option, the background still greyed as active UNTIL you check another box.

Just here : https://goo.gl/SYvt5L

webbiesdk commented 7 years ago

Can replicate, this is a bug.

webbiesdk commented 7 years ago

To be clear, the bug is that there isn't a grey background behind the selected item, when you open the select.

FHoulbreque commented 7 years ago

Yes, this is exactly what I mean.

It happens to me on the own documentation of this very plug-in... https://goo.gl/SYvt5L

You have to click two time on an option to get it with a greyed background, or just one if this is the "default" selected one.

I looked into this but can't find the faulty code there.

P.S. Edited my own bug report.

webbiesdk commented 7 years ago

I suspect it has something to do with the select re-initializing all the time, every time something change, the initSelect method is invoked. And i think that resets the grey background. It is however not invoked the second time one selects the same option, since nothing changes, and thereby the grey background is not reset.

I might have time to look further into it later today.

FHoulbreque commented 7 years ago

If I find a way to solve it, I'll just post a commit here. Not sure I get the time either today but will do what I can. !

FHoulbreque commented 7 years ago

I feel cheated as I almost spent all the day trying to solve this and didn't find the way to do it. Hope you'll have better ideas than mine.

webbiesdk commented 7 years ago

Seeing that you failed, I gave it a go. I had a pretty good idea going in though.

It should be fixed now, and you should be able to see that in the documentation (might need to clear your cache).

FHoulbreque commented 7 years ago

Thanks for this.

That's true it's fixed on the demo website... But not for me... It's not fixed at all... It's even worse, now the dropdown is getting truncated by the lower part of my form container... Really curious, isn't it?

I'll have to find where this come from...

Thanks anyway.

webbiesdk commented 7 years ago

If you think the issue is caused by angular-materialize, feel free to raise a new issue.

krescruz / angular-materialize