diff --git a/app/assets/javascripts/admin/addon/components/watched-word-form.js b/app/assets/javascripts/admin/addon/components/watched-word-form.js
index 1d6ba8ccba..f1b3138a78 100644
--- a/app/assets/javascripts/admin/addon/components/watched-word-form.js
+++ b/app/assets/javascripts/admin/addon/components/watched-word-form.js
@@ -2,7 +2,7 @@ import discourseComputed, { observes } from "discourse-common/utils/decorators";
import Component from "@ember/component";
import I18n from "I18n";
import WatchedWord from "admin/models/watched-word";
-import { equal } from "@ember/object/computed";
+import { equal, not } from "@ember/object/computed";
import { isEmpty } from "@ember/utils";
import { schedule } from "@ember/runloop";
import { inject as service } from "@ember/service";
@@ -16,7 +16,7 @@ export default Component.extend({
showMessage: false,
selectedTags: null,
isCaseSensitive: false,
-
+ submitDisabled: not("word"),
canReplace: equal("actionKey", "replace"),
canTag: equal("actionKey", "tag"),
canLink: equal("actionKey", "link"),
diff --git a/app/assets/javascripts/admin/addon/templates/components/watched-word-form.hbs b/app/assets/javascripts/admin/addon/templates/components/watched-word-form.hbs
index ef56c81a54..a971c2568e 100644
--- a/app/assets/javascripts/admin/addon/templates/components/watched-word-form.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/watched-word-form.hbs
@@ -35,7 +35,7 @@
-
+
{{#if this.showMessage}}
{{this.message}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/admin-watched-words-test.js b/app/assets/javascripts/discourse/tests/acceptance/admin-watched-words-test.js
index 37cb1c8797..532e79904b 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/admin-watched-words-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/admin-watched-words-test.js
@@ -75,11 +75,21 @@ acceptance("Admin - Watched Words", function (needs) {
test("add case-sensitive words", async function (assert) {
await visit("/admin/customize/watched_words/action/block");
-
+ const submitButton = query(".watched-word-form button");
+ assert.strictEqual(
+ submitButton.disabled,
+ true,
+ "Add button is disabled by default"
+ );
await click(".show-words-checkbox");
await fillIn(".watched-word-form input", "Discourse");
await click(".case-sensitivity-checkbox");
- await click(".watched-word-form button");
+ assert.strictEqual(
+ submitButton.disabled,
+ false,
+ "Add button should no longer be disabled after input is filled"
+ );
+ await click(submitButton);
assert
.dom(".watched-words-list .watched-word")
@@ -87,7 +97,7 @@ acceptance("Admin - Watched Words", function (needs) {
await fillIn(".watched-word-form input", "discourse");
await click(".case-sensitivity-checkbox");
- await click(".watched-word-form button");
+ await click(submitButton);
assert
.dom(".watched-words-list .watched-word")