From f16d174763be6641b0ff50a256feac5e1fa4e2c3 Mon Sep 17 00:00:00 2001
From: Chris Krycho <hello@chriskrycho.com>
Date: Fri, 29 May 2020 14:01:49 -0600
Subject: [PATCH] [BUGFIX LTS] invoke methods correctly in TextSupport
 sendAction

The introduction of the `attrs` API in Ember 3.13 included wrapping
items passed to components with `MutableCell`, to support two-way
binding. Although two-way binding is gone from much of Ember, the text
input components (`Input` and `Textarea`) continue to support it, via
the `TextSupport` mixins. The `sendAction` function used by the mixin
previously assumed that the only options were for an action to be a
string or a function -- not a function wrapped in a `MutableCell`.

The result was that this code, which would be expected to work, did not:
it would simply never be invoked.

    <Textarea @focus-in={{this.didFocusIn}} />

Accordingly, add logic to `sendAction` in `text_support.js` to unwrap a
mutable cell if it is set, and otherwise to carry on with the logic as
it was previously.

Resolves #18994
---
 .../components/input-angle-test.js            | 11 +++++++++
 .../components/input-curly-test.js            | 11 +++++++++
 .../components/textarea-angle-test.js         | 11 +++++++++
 .../components/textarea-curly-test.js         | 11 +++++++++
 .../views/lib/mixins/text_support.js          | 23 +++++++++++++------
 5 files changed, 60 insertions(+), 7 deletions(-)

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 `<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/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 `<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/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 \`<Input @${eventName}="${actionName}" />\`) is deprecated. Please use closure actions instead (\`<Input @${eventName}={{action "${actionName}"}} />\`).`;
+  if (SEND_ACTION && typeof action === 'string') {
+    let message = `Passing actions to components as strings (like \`<Input @${eventName}="${action}" />\`) is deprecated. Please use closure actions instead (\`<Input @${eventName}={{action "${action}"}} />\`).`;
 
     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();
   }
 }