Keep autocomplete suggestion panel open for multiple selection and close when clicked outside of panel in angular material 2

Issue

I want to modify the autocomplete component for multiple selection. What I want is that the suggestion panel should be opened for multiple selection via checkbox, and close it if user clicks outside of suggestion panel. As per the docs we can handle it via panelClosingActions but I cant find any way how to use it.

M able to keep Panel open via MdAutocompleteTrigger event and openPanel method but what happens is if 2nd index is selected and m selecting 4th index then 2nd index checkbox unticks and ticks again.

<md-autocomplete #auto="mdAutocomplete" id=autoComplete>
  <md-option *ngFor="let state of filteredStates | async" 
[value]="state.name" (click)="handleAutocomplete()">
<md-checkbox [checked]="state.selected" [(ngModel)]="state.selected">
    <span>{{ state.name }}</span> |
    <small>Population: {{state.population}}</small>
</md-checkbox>
  </md-option>
</md-autocomplete>

@ViewChild('autocomplete', {read: MdAutoCompleteTrigger})
autoComplete: MdAutocompleteTrigger

handleAutocomplete(){
this.autoComplete.openPanel();
}

Any help is really appreciated

Solution

After digging a lot I found out that material does not expose its methods to do so. So, in short, it's not possible yet

Answered By - Rohan Sampat