Unexpected close of select with multiple

[Fichti1982]

Hi,

i have a similar issue as described in #136. ISSUE: The multi-select dropdown closes after toggling any of the dropdown-options. Using angular2-materialize 15.1.9 together with materialize-css 0.100.1, angular 4.3.5

<div class="col s2 input-field">
    <select [(ngModel)]="selectedTypes" (ngModelChange)="filterOnChange()" materialize="material_select" multiple>
        <option value="" disabled>Select Type</option>
        <option *ngFor="let option of selectOptions" [value]="option.value">{{option.name}}</option>
    </select>
  </div>

I found that the method call of "performLocalElementUpdates()" in ngOnChanges causes the closing:

public ngOnChanges(_unused?) {
        if (this.isSelect()) {
            setTimeout(() => this.performLocalElementUpdates(), 10);
        }
    }

Do we need to add an additional check for the attr("multiple") here, similar to the fix made for #136 in ngDoCheck ?

[rockomatthews]

nice find. sorry to disappoint by not answering but I too am interested. I will add though, I used to have a chrome extension called page x-ray. It would tell you what platforms or implementations a site was using (if it was made it wordpress it would tell you). It caused all sorts of errors that didn't visibly affect any page really mine or elsewhere on the web # BUT what it did do was give me an error... I forgot what it said... every time I selected a multiple select option just like you have implemented above # YET did let the multiple select function as it is supposed to. You'd get an error every time you selected an option, but it would stay open and it completely worked... So without page x-ray, mine works, I just have to open it back up every select.
With page x-ray, it works, you don't have to open it back up every time, but you're left with ugly, unsettling error messages!

[rubyboy]

@Fichti1982 I think the result of removing it would be losing support for two way binding. Maybe you can give it a try, and if you get it work, submit a PR?

[Fichti1982]

@rubyboy Thanks for your feedback. You're right - 2 way binding does no longer work with the modifications i suggested above. Finally i could find some time to give it another try. I got it to work for me with following adaptions:

public ngOnChanges(_unused?) {
        if (this.isSelect()) {
            const nativeElement = this._el.nativeElement;
            const jQueryElement = $(nativeElement);

            // run performLocalElementUpdates() only if dropdown closed
            // otherwise the dropdown closes unexpected
            if (!jQueryElement.attr("multiple") || jQueryElement.parent().find("input.active").length === 0) {
                setTimeout(() => this.performLocalElementUpdates(), 10);
            }
        }
    }

What i do here is skipping the "performLocalElementUpdates()" as long as the dropdown is opened. Clicking on one of the select options does no longer close the dropdown. Model-changes are reflected in the UI as long as the dropdown is closed.

What do you think?

[briancaldass]

This does not work, I would like to see the clearest code and know where the function come from performLocalElementUpdates () and thisisSelect () this is from the multiselect element or are they custom functions of your code?