2

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 ?

Adrien
  • 2,866
  • 4
  • 23
  • 46

1 Answers1

2

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.

onetwo12
  • 2,359
  • 5
  • 23
  • 34
  • 1
    'cdk-focus-start' works but is deprecated. The new one is : 'cdk-focus-region-start' – Adrien Jul 18 '17 at 08:52
  • can you please help me to solve this https://stackoverflow.com/questions/52143052/how-to-manually-set-focus-on-mat-form-field-in-angular-6 @onetwo12 – Zhu Sep 03 '18 at 04:18