Remove the automatically selection of md-autocomplete in angular 4 material application

Question

I have an angular 4 application with material design. In this applicatino I open a dialog with a form inside. In this form, I have an autocomplete field in first position. This is my html code :

<div class="containerDialog">
<h1 md-dialog-title>Add porject</h1>
<form class="form-horizontal" role="form">
    <div class="form-group">
        <md-input-container>
            <input mdInput type="text" mdInput [mdAutocomplete]="project" placeholder="Selectionner un projet">
        </md-input-container>
        <md-autocomplete #project="mdAutocomplete">
            <md-option *ngFor="let project of projectsList" [value]="project.name">
                {{ project.name}}
            </md-option>
        </md-autocomplete>
    </div>
</form>
<div md-dialog-actions>
    <button md-button md-dialog-close="close">Cancel</button>
    <button md-button md-dialog-close="save">Save</button>
</div>

When I open the dialog, the autocomplete input is selected, so the list of project.name appears without click on the input.

So, do you know how I can do to don't have the input selected at the opening but just when I click on it ?

Answer 1

I had some similar problem. For me adding cdk-focus-region-start to the container worked.

In your case try this:

<div cdk-focus-region-start class="form-group">
  <md-input-container>
    <input mdInput type="text" mdInput [mdAutocomplete]="project" placeholder="Selectionner un projet">
  </md-input-container>
  <md-autocomplete #project="mdAutocomplete">
    <md-option *ngFor="let project of projectsList" [value]="project.name">
            {{ project.name}}
  </md-option>
</md-autocomplete>

If this does not work try adding cdk-focus-region-start to the parent form and remove it from the div.