CODEWITHSUNDEEP
angularangular-material
Nick Jonas
Nick Jonas

Reputation: 1237

Angular2 mdInput click focus issues

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:

enter image description here

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

enter image description here

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

Upvotes: 0

Views: 546

Answers (2)

Nick Jonas
Nick Jonas

Reputation: 1237

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(() => {});
}

Upvotes: 0

brijmcq
brijmcq

Reputation: 3418

Try to remove the brackets around the placeholder.

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

Upvotes: 0

Related Questions