Angular2 mdInput click focus issues

Question

I have an Angular2 Material mdInput field, and for some reason the placeholder text doesn't go away and the input text area doesn't focus when clicking into it.

<form class="create-taskitem-form" (ngSubmit)="submitNewTask()" novalidate>
    <md-input-container class="create-task-item">
      <input mdInput
       [(ngModel)]="taskListTitle"
       (keyup.escape)="clearNewTask()"
       name="taskListTitle"
       autocomplete="off"
       [placeholder]="newItemPlaceholder"
       type="text">
    </md-input-container>
</form>

When it doesn't work, placeholder doesn't disappear and field doesn't focus but I can type into it:

And what's strange is that once I resize the browser, it does work and snaps into the correct focus state:

What's also strange is that I have a nested child component where it works just fine. Here's the root module for them:

import 'hammerjs';

@NgModule({
  imports: [
    CommonModule,
    TasksRoutingModule,
    ContentEditableModule,
    ReactiveFormsModule, 
    FormsModule, 
    MaterialModule
  ],
  exports: [
    TasksRoutingModule
  ],
  providers: [
    TasklistTypes
  ],
  declarations: [TasklistCollectionComponent, TasklistComponent, TaskItemComponent]
})
export class TasksModule { }

score 0 · Answer 1 · answered Apr 06 '17 at 21:42

0

Try to remove the brackets around the placeholder.

...
 placeholder="New list"
...

answered Apr 06 '17 at 21:42

brijmcq

3,354
2
17
34

I have tried both that and removing placeholder, but same behavior. – Nick Jonas Apr 07 '17 at 00:10

score 0 · Answer 2 · answered Apr 07 '17 at 17:36

Something wasn't registering in Angular, so I just ran a zone when a focus() or blur() event happened on the input field, and that fixed it (for now):

<md-input-container class="create-task-item">
      <input mdInput
        (blur)="onBlur()" 
        (focus)="onFocus()"
        [(ngModel)]="taskListTitle"
        (keyup.escape)="clearNewTaskList()"
        name="taskListTitle"
        autocomplete="off"
        [placeholder]="newItemPlaceholder"
        type="text">
</md-input-container>

In my component:

onBlur(){
    this.zone.run(() => {});
  }

onFocus(){
    this.zone.run(() => {});
}

It looks like you broke the angular zones, resulting in a necessary manual refresh of the view using either `zone.run()` or `changeDetectorRef`. For future reference more about this [here](https://stackoverflow.com/questions/34827334/triggering-angular2-change-detection-manually) — Standaa - Remember Monica, Jun 12 '17 at 16:09

Angular2 mdInput click focus issues

2 Answers2