diff --git a/app/assets/javascripts/discourse/app/components/modal/request-group-membership-form.hbs b/app/assets/javascripts/discourse/app/components/modal/request-group-membership-form.hbs
index 6f347be5932..00c99e212ba 100644
--- a/app/assets/javascripts/discourse/app/components/modal/request-group-membership-form.hbs
+++ b/app/assets/javascripts/discourse/app/components/modal/request-group-membership-form.hbs
@@ -1,6 +1,7 @@
 <DModal
   @title={{this.title}}
   @closeModal={{@closeModal}}
+  @inline={{@inline}}
   class="request-group-membership-form"
 >
   <:body>
diff --git a/app/assets/javascripts/discourse/app/components/modal/request-group-membership-form.js b/app/assets/javascripts/discourse/app/components/modal/request-group-membership-form.js
index 4bd8e80d11e..157f8c23be9 100644
--- a/app/assets/javascripts/discourse/app/components/modal/request-group-membership-form.js
+++ b/app/assets/javascripts/discourse/app/components/modal/request-group-membership-form.js
@@ -8,10 +8,7 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 
 export default class RequestGroupMembershipForm extends Component {
   @tracked loading = false;
-
-  get reason() {
-    return this.args.model.group.membership_request_template;
-  }
+  @tracked reason = this.args.model.group.membership_request_template;
 
   get title() {
     return I18n.t("groups.membership_request.title", {
diff --git a/app/assets/javascripts/discourse/tests/integration/components/request-group-membership-form-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/request-group-membership-form-test.gjs
new file mode 100644
index 00000000000..c637f2a8c73
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/request-group-membership-form-test.gjs
@@ -0,0 +1,47 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { getOwner } from "@ember/application";
+import { click, fillIn, render } from "@ember/test-helpers";
+import RequestGroupMembershipForm from "discourse/components/modal/request-group-membership-form";
+import pretender, { response } from "discourse/tests/helpers/create-pretender";
+
+module(
+  "Integration | Component | request-group-membership-form",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("correctly enables/disables the submit button", async function (assert) {
+      const store = getOwner(this).lookup("service:store");
+      const group = store.createRecord("group", {
+        name: "a-team",
+        membership_request_template: "plz accept thx",
+      });
+      const model = { group };
+
+      await render(<template>
+        <RequestGroupMembershipForm @model={{model}} @inline={{true}} />
+      </template>);
+
+      assert.dom("textarea").hasValue("plz accept thx");
+      assert.dom(".btn-primary").isEnabled();
+
+      await fillIn("textarea", "");
+      assert.dom(".btn-primary").isDisabled();
+
+      await fillIn("textarea", "hi there");
+      assert.dom(".btn-primary").isEnabled();
+      assert.dom("textarea").hasValue("hi there");
+
+      // Doesn't modify the template
+      assert.strictEqual(group.membership_request_template, "plz accept thx");
+
+      pretender.post("/groups/a-team/request_membership.json", () => {
+        assert.step("api");
+        return response({});
+      });
+
+      await click(".btn-primary");
+      assert.verifySteps(["api"]);
+    });
+  }
+);