Components: Hide autocomplete options panel on disabled or add hidePanel method.

[Domvel]

Bug, feature request, or proposal:

(More a suggestion as a bug. But a unwanted behavior of users.)
Hide the options panel of autocomplete if the input element goes disabled.
Or add a method to hide the panel in an official way.

What is the expected behavior?

Hide the option panel if the input is disabled.
Also if the panel was displayed before the input disabled.

What is the current behavior?

The option panel still displayed. The user can select an item.
Also if the input is disabled. But note: Only when the clear button stops propagation.
That's a correct behavior but not as the user expected.

What are the steps to reproduce?

1. User selects an item from mat-autocomplete. (works as expected.)
2. User clicks again on the input to view the option, (ok)
3. The user clicks on the clear button on the right (matSuffix).
   The method on the clear button disables the input and sets event.stopPropagation() to prevent the underlayed input get focused.
   Result: The options panel still showing. The user can select an item. Also if the input is disabled.

What is the use-case or motivation for changing an existing behavior?

The clear button stops the propagation becuase the button is over the input element.
I do not want to select the input on clear-button clicked. But the stopPropagation()
enables this "bug" here descripted. (User can select a option also if input is disabled after clear)

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

5.0.1

Is there anything else we should know?

It's possible to hide the panel like

myAutoComplete.panel.nativeElement.hidden = true;

But this will still hide the panel after user clicked into the input again.
Until the user clicked outside of the input an the input again.

Solutions:

• Always hide the panel if the input is disabled.
• Add a method like showPanel for hidePanel. But do not simple hidden = true of the native element. Because of the issue explained above.

I've found no hidePanel() method. Only a showPanel() method. What's wrong with a hide method?

[crisbeto]

The MatAutocompleteTrigger directive has openPanel and closePanel methods, however it doesn't look like we've exported it through the template. You should still be able to get a reference to it through a ViewChild though. E.g.

class YourComponent {
  @ViewChild(MatAutocompleteTrigger) autocompleteTrigger: MatAutocompleteTrigger;

  closeAutocomplete() {
    this.autocompleteTrigger.closePanel();
  }
}

[Domvel]

Ok, thanks @crisbeto
This method isn't available in html template. I've not tested if closePanel() works (MatAutocompleteTrigger). But the Type MatAutocompleteTrigger has it.

My template looks like:

<mat-form-field>
  <input matInput #inputTest placeholder="Test" [formControl]="testControl" [matAutocomplete]="autoTests">
  <button mat-icon-button matSuffix *ngIf="testControl.value && testControl.enabled" (click)="clearTestSelect($event)">
    <mat-icon>clear</mat-icon>
  </button>
  <mat-autocomplete #autoTests="matAutocomplete" [displayWith]="displayFnTest" (optionSelected)="selectTest($event);">
    <mat-option *ngFor="let option of filteredOptionsTest | async" [value]="option">
      <span>{{ option.name }}</span>
    </mat-option>

    <!-- Btw. Is there no not-found feature like in material v1? -->
    <mat-option *ngIf="!testList || !testList.length" disabled>
      <span>No tests available.</span>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

autoTests.closePanel() doesn't exists. Maybe this ticket should fix the issue?

[crisbeto]

autoTests is referring to the MatAutocomplete, not the MatAutocompleteTrigger. After #9703 gets in, you should be able to get a hold of the trigger instance like this:

<mat-form-field>
  <input matInput #inputTest #trigger="matAutocompleteTrigger" placeholder="Test" [formControl]="testControl" [matAutocomplete]="autoTests">
  <button mat-icon-button matSuffix *ngIf="testControl.value && testControl.enabled" (click)="clearTestSelect($event)">
    <mat-icon>clear</mat-icon>
  </button>
  <mat-autocomplete #autoTests="matAutocomplete" [displayWith]="displayFnTest" (optionSelected)="selectTest($event);">
 <!-- rest of your code -->
</mat-form-field>

<button (click)="trigger.closePanel()">Close panel test</button>

Until the PR gets released, you can refer to https://github.com/angular/material2/issues/9687#issuecomment-361732004.

[Domvel]

Great, thanks. 👍

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}