From 6779b46f55cb41a2cd3bf44b05b81b1fb6645e84 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 13 Nov 2024 22:53:42 +0900
Subject: [PATCH] FIX: correctly makes @disabled dynamic (#29738)

Disabled was set on field init which was preventing it to be dynamic.
---
 .../components/fk/control-wrapper.gjs         | 12 ++++++++---
 .../components/fk/control/checkbox.gjs        |  2 +-
 .../form-kit/components/fk/control/code.gjs   |  2 +-
 .../components/fk/control/composer.gjs        |  2 +-
 .../form-kit/components/fk/control/icon.gjs   |  2 +-
 .../form-kit/components/fk/control/input.gjs  |  2 +-
 .../form-kit/components/fk/control/menu.gjs   |  2 +-
 .../components/fk/control/password.gjs        |  2 +-
 .../components/fk/control/question.gjs        |  4 ++--
 .../components/fk/control/radio-group.gjs     |  5 ++++-
 .../fk/control/radio-group/radio.gjs          |  2 +-
 .../form-kit/components/fk/control/select.gjs |  2 +-
 .../components/fk/control/textarea.gjs        |  1 +
 .../form-kit/components/fk/control/toggle.gjs |  1 +
 .../app/form-kit/components/fk/field.gjs      | 15 +++++++++++++-
 .../app/form-kit/components/fk/meta.gjs       |  2 +-
 .../tests/helpers/form-kit-assertions.js      |  7 ++-----
 .../form-kit/controls/checkbox-test.gjs       | 12 +++++++++++
 .../form-kit/controls/code-test.gjs           | 12 +++++++++++
 .../form-kit/controls/composer-test.gjs       | 12 +++++++++++
 .../form-kit/controls/icon-test.gjs           | 12 +++++++++++
 .../form-kit/controls/image-test.gjs          |  4 +++-
 .../form-kit/controls/input-text-test.gjs     | 12 +++++++++++
 .../form-kit/controls/menu-test.gjs           | 12 +++++++++++
 .../form-kit/controls/radio-test.gjs          | 16 +++++++++++++++
 .../form-kit/controls/select-test.gjs         | 14 +++++++++++++
 .../form-kit/controls/textarea-test.gjs       | 12 +++++++++++
 .../form-kit/controls/toggle-test.gjs         | 12 +++++++++++
 .../components/form-kit/field-test.gjs        | 20 ++++++++++++++++---
 29 files changed, 189 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs
index f30d352923d..4af4afe4943 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs
@@ -44,10 +44,10 @@ export default class FKControlWrapper extends Component {
         "form-kit__field"
         (concat "form-kit__field-" this.controlType)
         (if this.error "has-error")
-        (if @field.disabled "is-disabled")
+        (if @disabled "is-disabled")
         (if (eq @format "full") "--full")
       }}
-      data-disabled={{@field.disabled}}
+      data-disabled={{@disabled}}
       data-name={{@field.name}}
       data-control-type={{this.controlType}}
     >
@@ -86,6 +86,7 @@ export default class FKControlWrapper extends Component {
           @after={{@after}}
           @height={{@height}}
           @selection={{@selection}}
+          @disabled={{@disabled}}
           id={{@field.id}}
           name={{@field.name}}
           aria-invalid={{if this.error "true"}}
@@ -96,7 +97,12 @@ export default class FKControlWrapper extends Component {
           {{yield components}}
         </@component>
 
-        <FKMeta @value={{@value}} @field={{@field}} @error={{this.error}} />
+        <FKMeta
+          @disabled={{@disabled}}
+          @value={{@value}}
+          @field={{@field}}
+          @error={{this.error}}
+        />
       </div>
     </div>
   </template>
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/checkbox.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/checkbox.gjs
index 5a19dfbbc77..50ee04db14b 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/checkbox.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/checkbox.gjs
@@ -18,7 +18,7 @@ export default class FKControlCheckbox extends Component {
         type="checkbox"
         checked={{eq @value true}}
         class="form-kit__control-checkbox"
-        disabled={{@field.disabled}}
+        disabled={{@disabled}}
         ...attributes
         {{on "change" this.handleInput}}
       />
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/code.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/code.gjs
index fc6edb72bdc..772f22ac851 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/code.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/code.gjs
@@ -27,7 +27,7 @@ export default class FKControlCode extends Component {
       @content={{this.initialValue}}
       @onChange={{this.handleInput}}
       @mode={{@lang}}
-      @disabled={{@field.disabled}}
+      @disabled={{@disabled}}
       class="form-kit__control-code"
       style={{this.style}}
       ...attributes
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/composer.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/composer.gjs
index e683562752b..bcdf20b9b9d 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/composer.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/composer.gjs
@@ -24,7 +24,7 @@ export default class FKControlComposer extends Component {
     <DEditor
       @value={{readonly @value}}
       @change={{this.handleInput}}
-      @disabled={{@field.disabled}}
+      @disabled={{@disabled}}
       class="form-kit__control-composer"
       style={{this.style}}
       @textAreaId={{@field.id}}
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/icon.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/icon.gjs
index d11c115b252..f93c8aa5986 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/icon.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/icon.gjs
@@ -17,7 +17,7 @@ export default class FKControlIcon extends Component {
       @onlyAvailable={{true}}
       @options={{hash
         maximum=1
-        disabled=@field.disabled
+        disabled=@disabled
         caretDownIcon="angle-down"
         caretUpIcon="angle-up"
         icons=@value
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/input.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/input.gjs
index 51a53379092..4b15f73e3f5 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/input.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/input.gjs
@@ -72,7 +72,7 @@ export default class FKControlInput extends Component {
           (if @before "has-prefix")
           (if @after "has-suffix")
         }}
-        disabled={{@field.disabled}}
+        disabled={{@disabled}}
         ...attributes
         {{on "input" this.handleInput}}
       />
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/menu.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/menu.gjs
index c8ceb7adfb7..77e76476adb 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/menu.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/menu.gjs
@@ -23,7 +23,7 @@ export default class FKControlMenu extends Component {
     <DMenu
       @onRegisterApi={{this.registerMenuApi}}
       @triggerClass="form-kit__control-menu"
-      @disabled={{@field.disabled}}
+      @disabled={{@disabled}}
       @placement="bottom-start"
       @offset={{5}}
       id={{@field.id}}
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/password.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/password.gjs
index 59161c48a3f..a754f0b2913 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/password.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/password.gjs
@@ -61,7 +61,7 @@ export default class FKControlInput extends Component {
         type={{this.type}}
         value={{@value}}
         class="form-kit__control-password"
-        disabled={{@field.disabled}}
+        disabled={{@disabled}}
         ...attributes
         {{on "input" this.handleInput}}
         {{this.focusState}}
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/question.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/question.gjs
index dcda7a1eff1..af446e16542 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/question.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/question.gjs
@@ -24,7 +24,7 @@ export default class FKControlQuestion extends Component {
             value="true"
             checked={{eq @value true}}
             class="form-kit__control-radio"
-            disabled={{@field.disabled}}
+            disabled={{@disabled}}
             ...attributes
             id={{uuid}}
             {{on "change" this.handleInput}}
@@ -46,7 +46,7 @@ export default class FKControlQuestion extends Component {
             value="false"
             checked={{eq @value false}}
             class="form-kit__control-radio"
-            disabled={{@field.disabled}}
+            disabled={{@disabled}}
             ...attributes
             id={{uuid}}
             {{on "change" this.handleInput}}
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/radio-group.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/radio-group.gjs
index 634904f032f..cc17e60af66 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/radio-group.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/radio-group.gjs
@@ -16,7 +16,10 @@ export default class FKControlRadioGroup extends Component {
       {{yield
         (hash
           Radio=(component
-            FKControlRadioGroupRadio groupValue=@value field=@field
+            FKControlRadioGroupRadio
+            groupValue=@value
+            field=@field
+            disabled=@disabled
           )
         )
       }}
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/radio-group/radio.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/radio-group/radio.gjs
index a0e4dd4a39d..8a037017a6d 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/radio-group/radio.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/radio-group/radio.gjs
@@ -24,7 +24,7 @@ const FKControlRadioGroupRadio = <template>
           checked={{eq @groupValue @value}}
           id={{uuid}}
           class="form-kit__control-radio"
-          disabled={{@field.disabled}}
+          disabled={{@disabled}}
           ...attributes
           {{on "change" (withEventValue @field.set)}}
         />
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/select.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/select.gjs
index 9b3a304b3b3..859a4cdd460 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/select.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/select.gjs
@@ -20,7 +20,7 @@ export default class FKControlSelect extends Component {
   <template>
     <select
       value={{@value}}
-      disabled={{@field.disabled}}
+      disabled={{@disabled}}
       ...attributes
       class="form-kit__control-select"
       {{on "input" this.handleInput}}
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/textarea.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/textarea.gjs
index 282a5fed10e..7b642baebc2 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/textarea.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/textarea.gjs
@@ -24,6 +24,7 @@ export default class FKControlTextarea extends Component {
     <textarea
       class="form-kit__control-textarea"
       style={{this.style}}
+      disabled={{@disabled}}
       ...attributes
       {{on "input" this.handleInput}}
     >{{@value}}</textarea>
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/toggle.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/toggle.gjs
index fb78824089e..b3c50854e21 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/toggle.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/toggle.gjs
@@ -14,6 +14,7 @@ export default class FKControlToggle extends Component {
   <template>
     <DToggleSwitch
       @state={{@value}}
+      disabled={{@disabled}}
       {{on "click" this.handleInput}}
       class="form-kit__control-toggle"
     />
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs
index ac66e6b85e9..073f5b87d77 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs
@@ -55,7 +55,6 @@ export default class FKField extends Component {
       set: this.args.set,
       addError: this.args.addError,
       validate: this.args.validate,
-      disabled: this.args.disabled,
       validation: this.args.validation,
       onSet: this.args.onSet,
     });
@@ -95,6 +94,7 @@ export default class FKField extends Component {
           Custom=(component
             FKControlWrapper
             errors=@errors
+            disabled=@disabled
             component=FKControlCustom
             value=this.value
             field=this.field
@@ -103,6 +103,7 @@ export default class FKField extends Component {
           Code=(component
             FKControlWrapper
             errors=@errors
+            disabled=@disabled
             component=FKControlCode
             value=this.value
             field=this.field
@@ -111,6 +112,7 @@ export default class FKField extends Component {
           Question=(component
             FKControlWrapper
             errors=@errors
+            disabled=@disabled
             component=FKControlQuestion
             value=this.value
             field=this.field
@@ -119,6 +121,7 @@ export default class FKField extends Component {
           Textarea=(component
             FKControlWrapper
             errors=@errors
+            disabled=@disabled
             component=FKControlTextarea
             value=this.value
             field=this.field
@@ -127,6 +130,7 @@ export default class FKField extends Component {
           Checkbox=(component
             FKControlWrapper
             errors=@errors
+            disabled=@disabled
             component=FKControlCheckbox
             value=this.value
             field=this.field
@@ -135,6 +139,7 @@ export default class FKField extends Component {
           Image=(component
             FKControlWrapper
             errors=@errors
+            disabled=@disabled
             component=FKControlImage
             value=this.value
             field=this.field
@@ -143,6 +148,7 @@ export default class FKField extends Component {
           Password=(component
             FKControlWrapper
             errors=@errors
+            disabled=@disabled
             component=FKControlPassword
             value=this.value
             field=this.field
@@ -151,6 +157,7 @@ export default class FKField extends Component {
           Composer=(component
             FKControlWrapper
             errors=@errors
+            disabled=@disabled
             component=FKControlComposer
             value=this.value
             field=this.field
@@ -159,6 +166,7 @@ export default class FKField extends Component {
           Icon=(component
             FKControlWrapper
             errors=@errors
+            disabled=@disabled
             component=FKControlIcon
             value=this.value
             field=this.field
@@ -167,6 +175,7 @@ export default class FKField extends Component {
           Toggle=(component
             FKControlWrapper
             errors=@errors
+            disabled=@disabled
             component=FKControlToggle
             value=this.value
             field=this.field
@@ -175,6 +184,7 @@ export default class FKField extends Component {
           Menu=(component
             FKControlWrapper
             errors=@errors
+            disabled=@disabled
             component=FKControlMenu
             value=this.value
             field=this.field
@@ -183,6 +193,7 @@ export default class FKField extends Component {
           Select=(component
             FKControlWrapper
             errors=@errors
+            disabled=@disabled
             component=FKControlSelect
             value=this.value
             field=this.field
@@ -191,6 +202,7 @@ export default class FKField extends Component {
           Input=(component
             FKControlWrapper
             errors=@errors
+            disabled=@disabled
             component=FKControlInput
             value=this.value
             field=this.field
@@ -199,6 +211,7 @@ export default class FKField extends Component {
           RadioGroup=(component
             FKControlWrapper
             errors=@errors
+            disabled=@disabled
             component=FKControlRadioGroup
             value=this.value
             field=this.field
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/meta.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/meta.gjs
index 799a5439a4f..9c05d997754 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/meta.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/meta.gjs
@@ -4,7 +4,7 @@ import FKErrors from "discourse/form-kit/components/fk/errors";
 
 export default class FKMeta extends Component {
   get shouldRenderCharCounter() {
-    return this.args.field.maxLength > 0 && !this.args.field.disabled;
+    return this.args.field.maxLength > 0 && !this.args.disabled;
   }
 
   get shouldRenderMeta() {
diff --git a/app/assets/javascripts/discourse/tests/helpers/form-kit-assertions.js b/app/assets/javascripts/discourse/tests/helpers/form-kit-assertions.js
index 1d02766f608..9b78406ab76 100644
--- a/app/assets/javascripts/discourse/tests/helpers/form-kit-assertions.js
+++ b/app/assets/javascripts/discourse/tests/helpers/form-kit-assertions.js
@@ -119,11 +119,8 @@ class FieldHelper {
   }
 
   get disabled() {
-    this.context
-      .dom(this.element)
-      .exists(`Could not find field (name: ${this.name}).`);
-
-    this.context.ok(this.element.dataset.disabled === "");
+    this.context.dom(this.element).exists();
+    return this.element.dataset.disabled === "";
   }
 
   hasTitle(title, message) {
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/checkbox-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/checkbox-test.gjs
index 7fa9581f4bd..b14132765ab 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/checkbox-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/checkbox-test.gjs
@@ -32,5 +32,17 @@ module(
 
       assert.deepEqual(data, { foo: true });
     });
+
+    test("when disabled", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" @disabled={{true}} as |field|>
+            <field.Checkbox />
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert.dom(".form-kit__control-checkbox").hasAttribute("disabled");
+    });
   }
 );
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/code-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/code-test.gjs
index 344aecfc72e..3809dbb4e62 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/code-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/code-test.gjs
@@ -28,4 +28,16 @@ module("Integration | Component | FormKit | Controls | Code", function (hooks) {
     assert.deepEqual(data, { foo: "bar" });
     assert.form().field("foo").hasValue("bar");
   });
+
+  test("when disabled", async function (assert) {
+    await render(<template>
+      <Form as |form|>
+        <form.Field @name="foo" @title="Foo" @disabled={{true}} as |field|>
+          <field.Code />
+        </form.Field>
+      </Form>
+    </template>);
+
+    assert.dom(".ace_text-input").hasAttribute("readonly");
+  });
 });
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/composer-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/composer-test.gjs
index 9ca43f9a40c..db0f560b44c 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/composer-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/composer-test.gjs
@@ -32,5 +32,17 @@ module(
 
       assert.deepEqual(data, { foo: "bar" });
     });
+
+    test("when disabled", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" @disabled={{true}} as |field|>
+            <field.Composer />
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert.dom(".d-editor-input").hasAttribute("disabled");
+    });
   }
 );
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/icon-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/icon-test.gjs
index d7af26fbdf2..e80a53e24ab 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/icon-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/icon-test.gjs
@@ -32,4 +32,16 @@ module("Integration | Component | FormKit | Controls | Icon", function (hooks) {
     assert.deepEqual(data.foo, "pencil");
     assert.form().field("foo").hasValue("pencil");
   });
+
+  test("when disabled", async function (assert) {
+    await render(<template>
+      <Form as |form|>
+        <form.Field @name="foo" @title="Foo" @disabled={{true}} as |field|>
+          <field.Icon />
+        </form.Field>
+      </Form>
+    </template>);
+
+    assert.dom(".form-kit__control-icon.is-disabled").exists();
+  });
 });
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/image-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/image-test.gjs
index 8c16db7196e..e2471bf84b0 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/image-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/image-test.gjs
@@ -1,5 +1,5 @@
 import { render } from "@ember/test-helpers";
-import { module, test } from "qunit";
+import { module, test, todo } from "qunit";
 import Form from "discourse/components/form";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
@@ -45,5 +45,7 @@ module(
 
       assert.form().field("image_url").hasValue(data.image_url);
     });
+
+    todo("when disabled", async function () {});
   }
 );
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/input-text-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/input-text-test.gjs
index 1bf1df45e94..c348d69fc9f 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/input-text-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/input-text-test.gjs
@@ -31,5 +31,17 @@ module(
 
       assert.deepEqual(data.foo, "bar");
     });
+
+    test("when disabled", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" @disabled={{true}} as |field|>
+            <field.Input />
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert.dom(".form-kit__control-input").hasAttribute("disabled");
+    });
   }
 );
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/menu-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/menu-test.gjs
index 177cbcd56ae..a7d3f993367 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/menu-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/menu-test.gjs
@@ -32,4 +32,16 @@ module("Integration | Component | FormKit | Controls | Menu", function (hooks) {
     assert.deepEqual(data, { foo: "item-3" });
     assert.form().field("foo").hasValue("item-3");
   });
+
+  test("when disabled", async function (assert) {
+    await render(<template>
+      <Form as |form|>
+        <form.Field @name="foo" @title="Foo" @disabled={{true}} as |field|>
+          <field.Menu />
+        </form.Field>
+      </Form>
+    </template>);
+
+    assert.dom(".form-kit__control-menu").hasAttribute("disabled");
+  });
 });
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/radio-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/radio-test.gjs
index 1357e74c535..20536f286ef 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/radio-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/radio-test.gjs
@@ -41,5 +41,21 @@ module(
         .dom(".form-kit__control-radio-description")
         .hasText("One description");
     });
+
+    test("when disabled", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" @disabled={{true}} as |field|>
+            <field.RadioGroup as |RadioGroup|>
+              <RadioGroup.Radio @value="one" as |radio|>
+                <radio.Title>One title</radio.Title>
+              </RadioGroup.Radio>
+            </field.RadioGroup>
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert.dom(".form-kit__control-radio").hasAttribute("disabled");
+    });
   }
 );
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/select-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/select-test.gjs
index 2bbb4198eba..f71e61ee9a5 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/select-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/select-test.gjs
@@ -36,5 +36,19 @@ module(
 
       assert.deepEqual(data, { foo: "option-3" });
     });
+
+    test("when disabled", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" @disabled={{true}} as |field|>
+            <field.Select as |select|>
+              <select.Option @value="option-1">Option 1</select.Option>
+            </field.Select>
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert.dom(".form-kit__control-select").hasAttribute("disabled");
+    });
   }
 );
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/textarea-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/textarea-test.gjs
index d6192c65f65..2ac444220b6 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/textarea-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/textarea-test.gjs
@@ -32,5 +32,17 @@ module(
 
       assert.deepEqual(data, { foo: "bar" });
     });
+
+    test("when disabled", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" @disabled={{true}} as |field|>
+            <field.Textarea />
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert.dom(".form-kit__control-textarea").hasAttribute("disabled");
+    });
   }
 );
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/toggle-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/toggle-test.gjs
index 8740c9de975..dc1264eed23 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/toggle-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/toggle-test.gjs
@@ -32,5 +32,17 @@ module(
 
       assert.deepEqual(data, { foo: true });
     });
+
+    test("when disabled", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" @disabled={{true}} as |field|>
+            <field.Toggle />
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert.dom(".form-kit__control-toggle").hasAttribute("disabled");
+    });
   }
 );
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs
index dd7382da1e9..55bc62cdc61 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs
@@ -1,5 +1,6 @@
-import { hash } from "@ember/helper";
+import { fn, hash } from "@ember/helper";
 import {
+  click,
   fillIn,
   render,
   resetOnerror,
@@ -37,16 +38,29 @@ module("Integration | Component | FormKit | Field", function (hooks) {
 
   test("@disabled", async function (assert) {
     await render(<template>
-      <Form as |form|>
-        <form.Field @name="foo" @title="Foo" @disabled={{true}} as |field|>
+      <Form @data={{hash disabled=true}} as |form data|>
+        <form.Field
+          @name="foo"
+          @title="Foo"
+          @disabled={{data.disabled}}
+          as |field|
+        >
           <field.Input />
         </form.Field>
+
+        <form.Button class="test" @action={{fn form.set "disabled" false}} />
       </Form>
     </template>);
 
     assert
       .dom("#control-foo.is-disabled[data-disabled]")
       .exists("it sets the disabled class and data attribute");
+
+    await click(".test");
+
+    assert
+      .dom("#control-foo.is-disabled[data-disabled]")
+      .doesNotExist("it removes the disabled class and data attribute");
   });
 
   test("@description", async function (assert) {