FIX: correctly makes @disabled dynamic (#29738)

Disabled was set on field init which was preventing it to be dynamic.
2025-02-25 18:55:32 -06:00 · 2024-11-13 22:53:42 +09:00 · 2024-11-13 22:53:42 +09:00 · 6779b46f55
commit 6779b46f55
parent 9a22d7df7b
29 changed files with 189 additions and 26 deletions
--- 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>
--- 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}}
      />
--- 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
--- 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}}
--- 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
--- 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}}
      />
--- 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}}
--- 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}}
--- 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}}
--- 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
          )
        )
      }}
--- 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)}}
        />
--- 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}}
--- 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>
--- 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"
    />
--- 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
--- 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() {
--- 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) {
--- 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");
+    });
  }
 );
--- 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");
+  });
 });
--- 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");
+    });
  }
 );
--- 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();
+  });
 });
--- 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 () {});
  }
 );
--- 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");
+    });
  }
 );
--- 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");
+  });
 });
--- 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");
+    });
  }
 );
--- 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");
+    });
  }
 );
--- 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");
+    });
  }
 );
--- 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");
+    });
  }
 );
--- 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) {