feat(md-input): publish DOM blur event

support validateTrigger.blur ref: https://www.danyow.net/aurelia-validation-alpha/
aurelia-ui-toolkits · Aug 27, 2016 · 547ddb3 · 547ddb3
1 parent 1bb0a8e
commit 547ddb3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 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" />
-    <textarea if.bind="mdTextArea === true" id="${controlId}" ref="input" value.bind="mdValue" class="materialize-textarea" disabled.bind="mdDisabled"></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()" />
+    <textarea if.bind="mdTextArea === true" id="${controlId}" ref="input" value.bind="mdValue" class="materialize-textarea" disabled.bind="mdDisabled" blur.trigger="blur()"></textarea>
     <label for="${controlId}" ref="label">${mdLabel}</label>
   </div>
 </template>
diff --git a/src/input/input.js b/src/input/input.js
@@ -1,4 +1,5 @@
 import { bindable, customElement } from 'aurelia-templating';
+import { DOM } from 'aurelia-pal';
 import { bindingMode } from 'aurelia-binding';
 import { inject } from 'aurelia-dependency-injection';
 import { TaskQueue } from 'aurelia-task-queue';
@@ -62,6 +63,12 @@ export class MdInput {
     this.updateService.update();
   }
 
+  blur() {
+    // forward "blur" events to the custom element
+    const event = DOM.createCustomEvent('blur');
+    this.element.dispatchEvent(event);
+  }
+
   mdValueChanged() {
     this.updateService.update();
     if (this.mdTextArea) {