diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js
index 3edda7cdb7d..c6a029c2429 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js
@@ -1,5 +1,6 @@
import { RenderingTestCase, moduleFor, runDestroy, runTask } from 'internal-test-helpers';
+import { action } from '@ember/object';
import { assign } from '@ember/polyfills';
import { set } from '@ember/-internals/metal';
import { jQueryDisabled, jQuery } from '@ember/-internals/views';
@@ -780,6 +781,16 @@ moduleFor(
['@test sends an action with `` for native DOM events']() {
this.assertTriggersNativeDOMEvents();
}
+
+ ['@test triggers a method with ``'](assert) {
+ this.render(``, {
+ didTrigger: action(function() {
+ assert.ok(true, 'action was triggered');
+ }),
+ });
+
+ this.triggerEvent('keyup', { keyCode: 65 });
+ }
}
);
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js
index 948d7a1cc6e..47f91bf60b1 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js
@@ -1,5 +1,6 @@
import { RenderingTestCase, moduleFor, runDestroy, runTask } from 'internal-test-helpers';
+import { action } from '@ember/object';
import { assign } from '@ember/polyfills';
import { set } from '@ember/-internals/metal';
import { jQueryDisabled, jQuery } from '@ember/-internals/views';
@@ -631,6 +632,16 @@ moduleFor(
['@test sends an action with `{{input EVENT=(action "foo")}}` for native DOM events']() {
this.assertTriggersNativeDOMEvents();
}
+
+ ['@test triggers a method with `{{input key-up=this.didTrigger}}`'](assert) {
+ this.render(`{{input key-up=this.didTrigger}}`, {
+ didTrigger: action(function() {
+ assert.ok(true, 'action was triggered');
+ }),
+ });
+
+ this.triggerEvent('keyup', { keyCode: 65 });
+ }
}
);
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
index 592107c7143..63dda4652c8 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
@@ -1,5 +1,6 @@
import { RenderingTestCase, moduleFor, classes, applyMixins, runTask } from 'internal-test-helpers';
+import { action } from '@ember/object';
import { assign } from '@ember/polyfills';
import { set } from '@ember/-internals/metal';
@@ -209,5 +210,15 @@ moduleFor(
runTask(() => set(this.context, 'model', { val: 'A beautiful day in Seattle' }));
this.assertTextArea({ value: 'A beautiful day in Seattle' });
}
+
+ ['@test triggers a method with ``'](assert) {
+ this.render(``, {
+ didTrigger: action(function() {
+ assert.ok(true, 'action was triggered');
+ }),
+ });
+
+ this.triggerEvent('keyup', { keyCode: 65 });
+ }
}
);
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js
index 18636e19692..b15ca7166bd 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js
@@ -1,5 +1,6 @@
import { RenderingTestCase, moduleFor, classes, applyMixins, runTask } from 'internal-test-helpers';
+import { action } from '@ember/object';
import { assign } from '@ember/polyfills';
import { set } from '@ember/-internals/metal';
@@ -161,5 +162,15 @@ moduleFor(
runTask(() => set(this.context, 'model', { val: 'A beautiful day in Seattle' }));
this.assertTextArea({ value: 'A beautiful day in Seattle' });
}
+
+ ['@test triggers a method with `{{textarea key-up=this.didTrigger}}`'](assert) {
+ this.render(`{{textarea key-up=this.didTrigger}}`, {
+ didTrigger: action(function() {
+ assert.ok(true, 'action was triggered');
+ }),
+ });
+
+ this.triggerEvent('keyup', { keyCode: 65 });
+ }
}
);
diff --git a/packages/@ember/-internals/views/lib/mixins/text_support.js b/packages/@ember/-internals/views/lib/mixins/text_support.js
index 8f32ddac8aa..f26be5ef22b 100644
--- a/packages/@ember/-internals/views/lib/mixins/text_support.js
+++ b/packages/@ember/-internals/views/lib/mixins/text_support.js
@@ -6,6 +6,7 @@ import { get, set, Mixin } from '@ember/-internals/metal';
import { TargetActionSupport } from '@ember/-internals/runtime';
import { deprecate } from '@ember/debug';
import { SEND_ACTION } from '@ember/deprecated-features';
+import { MUTABLE_CELL } from '@ember/-internals/views';
const KEY_EVENTS = {
13: 'insertNewline',
@@ -306,11 +307,19 @@ export default Mixin.create(TargetActionSupport, {
// sendAction semantics for TextField are different from
// the component semantics so this method normalizes them.
function sendAction(eventName, view, event) {
- let actionName = get(view, `attrs.${eventName}`) || get(view, eventName);
+ let action = get(view, `attrs.${eventName}`);
+ if (action !== null && typeof action === 'object' && action[MUTABLE_CELL] === true) {
+ action = action.value;
+ }
+
+ if (action === undefined) {
+ action = get(view, eventName);
+ }
+
let value = get(view, 'value');
- if (SEND_ACTION && typeof actionName === 'string') {
- let message = `Passing actions to components as strings (like \`\`) is deprecated. Please use closure actions instead (\`\`).`;
+ if (SEND_ACTION && typeof action === 'string') {
+ let message = `Passing actions to components as strings (like \`\`) is deprecated. Please use closure actions instead (\`\`).`;
deprecate(message, false, {
id: 'ember-component.send-action',
@@ -319,14 +328,14 @@ function sendAction(eventName, view, event) {
});
view.triggerAction({
- action: actionName,
+ action: action,
actionContext: [value, event],
});
- } else if (typeof actionName === 'function') {
- actionName(value, event);
+ } else if (typeof action === 'function') {
+ action(value, event);
}
- if (actionName && !get(view, 'bubbles')) {
+ if (action && !get(view, 'bubbles')) {
event.stopPropagation();
}
}