fix(md-input): trigger focus, add blur-on-enter option, fix #349, fix #…

…302
aurelia-ui-toolkits · Jan 9, 2017 · 9a50daa · 9a50daa
1 parent cfe7566
commit 9a50daa
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 9 deletions.
diff --git a/src/input/input.html b/src/input/input.html
@@ -3,8 +3,8 @@
   <div class="input-field">
     <!-- <content select="[md-prefix]"></content> -->
     <slot></slot>
-    <input if.bind="mdTextArea === false" id="${controlId}" type.bind="mdType" step.bind="mdStep" ref="input" value.bind="mdValue" disabled.bind="mdDisabled" blur.trigger="blur()" />
-    <textarea if.bind="mdTextArea === true" id="${controlId}" ref="input" value.bind="mdValue" class="materialize-textarea" disabled.bind="mdDisabled" blur.trigger="blur()"></textarea>
+    <input if.bind="mdTextArea === false" id="${controlId}" type.bind="mdType" step.bind="mdStep" ref="input" value.bind="mdValue" disabled.bind="mdDisabled" blur.trigger="blur()" focus.trigger="focus()" />
+    <textarea if.bind="mdTextArea === true" id="${controlId}" ref="input" value.bind="mdValue" class="materialize-textarea" disabled.bind="mdDisabled" blur.trigger="blur()" focus.trigger="focus()"></textarea>
     <label for="${controlId}" ref="label">${mdLabel}</label>
   </div>
 </template>
diff --git a/src/input/input.js b/src/input/input.js
@@ -1,17 +1,18 @@
-import { bindable, customElement } from 'aurelia-templating';
-import { bindingMode } from 'aurelia-binding';
-import { inject } from 'aurelia-dependency-injection';
-import { TaskQueue } from 'aurelia-task-queue';
-import { getBooleanFromAttributeValue } from '../common/attributes';
-import { MdInputUpdateService } from './input-update-service';
-import { fireEvent } from '../common/events';
+import {bindable, customElement} from 'aurelia-templating';
+import {bindingMode} from 'aurelia-binding';
+import {inject} from 'aurelia-dependency-injection';
+import {TaskQueue} from 'aurelia-task-queue';
+import {getBooleanFromAttributeValue} from '../common/attributes';
+import {MdInputUpdateService} from './input-update-service';
+import {fireEvent} from '../common/events';
 
 @customElement('md-input')
 @inject(Element, TaskQueue, MdInputUpdateService)
 export class MdInput {
   static id = 0;
 
   @bindable() mdLabel = '';
+  @bindable() mdBlurOnEnter = false;
   @bindable() mdDisabled = false;
   @bindable({
     defaultBindingMode: bindingMode.oneTime
@@ -44,11 +45,13 @@ export class MdInput {
     this.taskQueue = taskQueue;
     this.controlId = `md-input-${MdInput.id++}`;
     this.updateService = updateService;
+    this.blurOnEnter = this.blurOnEnter.bind(this);
   }
 
   bind() {
     this.mdTextArea = getBooleanFromAttributeValue(this.mdTextArea);
     this.mdShowErrortext = getBooleanFromAttributeValue(this.mdShowErrortext);
+    this.mdBlurOnEnter = getBooleanFromAttributeValue(this.mdBlurOnEnter);
   }
 
   attached() {
@@ -73,12 +76,21 @@ export class MdInput {
     if (this.mdType === 'time') {
       $(this.input).siblings('label').addClass('active');
     }
+    this.attachEventHandlers();
+  }
+
+  detached() {
+    this.detachEventHandlers();
   }
 
   blur() {
     fireEvent(this.element, 'blur');
   }
 
+  focus() {
+    fireEvent(this.element, 'focus');
+  }
+
   mdValueChanged() {
     if (!$(this.input).is(':focus')) {
       this.updateService.update();
@@ -87,4 +99,22 @@ export class MdInput {
       $(this.input).trigger('autoresize');
     }
   }
+
+  attachEventHandlers() {
+    if (this.mdBlurOnEnter) {
+      this.element.addEventListener('keyup', this.blurOnEnter);
+    }
+  }
+
+  detachEventHandlers() {
+    if (this.mdBlurOnEnter) {
+      this.element.removeEventListener('keyup', this.blurOnEnter);
+    }
+  }
+
+  blurOnEnter(e) {
+    if (e.keyCode && e.keyCode === 13) {
+      this.input.blur();
+    }
+  }
 }