Supprimer la sélection automatique de la saisie semi-automatique md dans l'application de matériau angulaire 4

Question

J'ai une application angulaire 4 avec conception de matériau. Dans cet applicatino j'ouvre un dialogue avec un formulaire à l'intérieur. Dans ce formulaire, j'ai un champ de saisie semi-automatique en première position. Ceci est mon code html:

<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> 

Quand j'ouvre la boîte de dialogue, l'entrée de saisie semi-automatique est sélectionné, la liste des project.name apparaît sans clic sur l'entrée. Alors, savez-vous comment je peux faire pour ne pas avoir l'entrée sélectionnée à l'ouverture mais juste quand je clique dessus?

Answer 1

J'ai eu un problème similaire. Pour moi, ajouter cdk-focus-region-start au récipient travaillé.

Dans votre cas, essayez ceci:

<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> 

Si cela ne fonctionne pas essayez d'ajouter cdk-focus-region-start au parent form et le retirer de la div.