From c758e2cdd17cc7f8cc44596e72d60e81b5bd8def Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 14 Jan 2022 15:51:31 +0100
Subject: [PATCH] UX: flat-btn should also respond to Enter (#15584)

---
 .../discourse/app/components/flat-button.js   | 10 +++-
 .../components/flat-button-test.js            | 47 +++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/discourse/tests/integration/components/flat-button-test.js

diff --git a/app/assets/javascripts/discourse/app/components/flat-button.js b/app/assets/javascripts/discourse/app/components/flat-button.js
index 8f8ac08a14..3e83a64fba 100644
--- a/app/assets/javascripts/discourse/app/components/flat-button.js
+++ b/app/assets/javascripts/discourse/app/components/flat-button.js
@@ -14,7 +14,15 @@ export default Component.extend({
     }
   },
 
+  keyDown(event) {
+    if (event.key === "Enter") {
+      this.action?.();
+      return false;
+    }
+  },
+
   click() {
-    return this.attrs.action();
+    this.action?.();
+    return false;
   },
 });
diff --git a/app/assets/javascripts/discourse/tests/integration/components/flat-button-test.js b/app/assets/javascripts/discourse/tests/integration/components/flat-button-test.js
new file mode 100644
index 0000000000..8b3e55aa45
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/flat-button-test.js
@@ -0,0 +1,47 @@
+import componentTest, {
+  setupRenderingTest,
+} from "discourse/tests/helpers/component-test";
+import { discourseModule } from "discourse/tests/helpers/qunit-helpers";
+import { click, triggerKeyEvent } from "@ember/test-helpers";
+import hbs from "htmlbars-inline-precompile";
+
+discourseModule("Integration | Component | flat-button", function (hooks) {
+  setupRenderingTest(hooks);
+
+  componentTest("press Enter", {
+    template: hbs`{{flat-button action=action}}`,
+
+    beforeEach() {
+      this.set("foo", null);
+      this.set("action", () => {
+        this.set("foo", "bar");
+      });
+    },
+
+    async test(assert) {
+      await triggerKeyEvent(".btn-flat", "keydown", 32);
+
+      assert.strictEqual(this.foo, null);
+
+      await triggerKeyEvent(".btn-flat", "keydown", 13);
+
+      assert.strictEqual(this.foo, "bar");
+    },
+  });
+  componentTest("click", {
+    template: hbs`{{flat-button action=action}}`,
+
+    beforeEach() {
+      this.set("foo", null);
+      this.set("action", () => {
+        this.set("foo", "bar");
+      });
+    },
+
+    async test(assert) {
+      await click(".btn-flat");
+
+      assert.strictEqual(this.foo, "bar");
+    },
+  });
+});