Stop event propagation when hitting "enter" in the gh-blur-input component

fixes #3516
- new behavior is disabled by default
- added new stopEnterKeyDownPropagation property enable new behavior
This commit is contained in:
Maurice Williams 2014-08-02 23:17:25 -04:00
parent ec1dc0e24a
commit 8aef67ef52
2 changed files with 12 additions and 2 deletions

View File

@ -1,5 +1,6 @@
var BlurInput = Ember.TextField.extend({ var BlurInput = Ember.TextField.extend({
selectOnClick: false, selectOnClick: false,
stopEnterKeyDownPropagation: false,
click: function (event) { click: function (event) {
if (this.get('selectOnClick')) { if (this.get('selectOnClick')) {
event.currentTarget.select(); event.currentTarget.select();
@ -7,6 +8,15 @@ var BlurInput = Ember.TextField.extend({
}, },
focusOut: function () { focusOut: function () {
this.sendAction('action', this.get('value')); this.sendAction('action', this.get('value'));
},
keyDown: function (event) {
// stop event propagation when pressing "enter"
// most useful in the case when undesired (global) keyboard shortcuts are getting triggered while interacting
// with this particular input element.
if (this.get('stopEnterKeyDownPropagation') && event.keyCode === 13) {
event.stopPropagation();
return true;
}
} }
}); });

View File

@ -6,7 +6,7 @@
<label for="url">URL</label> <label for="url">URL</label>
</td> </td>
<td class="post-setting-field"> <td class="post-setting-field">
{{gh-blur-input class="post-setting-slug" id="url" value=slugValue name="post-setting-slug" action="updateSlug" placeholder=slugPlaceholder selectOnClick="true"}} {{gh-blur-input class="post-setting-slug" id="url" value=slugValue name="post-setting-slug" action="updateSlug" placeholder=slugPlaceholder selectOnClick="true" stopEnterKeyDownPropagation="true"}}
</td> </td>
</tr> </tr>
<tr class="post-setting"> <tr class="post-setting">
@ -14,7 +14,7 @@
<label for="pub-date">Pub Date</label> <label for="pub-date">Pub Date</label>
</td> </td>
<td class="post-setting-field"> <td class="post-setting-field">
{{gh-blur-input class="post-setting-date" value=publishedAtValue name="post-setting-date" action="setPublishedAt" placeholder=publishedAtPlaceholder}} {{gh-blur-input class="post-setting-date" value=publishedAtValue name="post-setting-date" action="setPublishedAt" placeholder=publishedAtPlaceholder stopEnterKeyDownPropagation="true"}}
</td> </td>
</tr> </tr>
<tr class="post-setting"> <tr class="post-setting">