FIX: Inputs using focusout regressed in #17345 (#17389)

app/assets/javascripts/admin/addon/components/secret-value-list.js

@@ -22,17 +22,23 @@ export default Component.extend({
   },
 
   actions: {
-    changeKey(index, newValue) {
+    changeKey(index, event) {
+      const newValue = event.target.value;
+
       if (this._checkInvalidInput(newValue)) {
         return;
       }
+
       this._replaceValue(index, newValue, "key");
     },
 
-    changeSecret(index, newValue) {
+    changeSecret(index, event) {
+      const newValue = event.target.value;
+
       if (this._checkInvalidInput(newValue)) {
         return;
       }
+
       this._replaceValue(index, newValue, "secret");
     },
 

app/assets/javascripts/admin/addon/components/simple-list.js

@@ -24,8 +24,8 @@ export default Component.extend({
   },
 
   @action
-  changeValue(index, newValue) {
+  changeValue(index, event) {
-    this.collection.replace(index, 1, [newValue]);
+    this.collection.replace(index, 1, [event.target.value]);
     this.collection.arrayContentDidChange(index);
     this._onChange();
   },
@@ -65,7 +65,7 @@ export default Component.extend({
   },
 
   _onChange() {
-    this.attrs.onChange && this.attrs.onChange(this.collection);
+    this.onChange?.(this.collection);
   },
 
   @discourseComputed("collection")

app/assets/javascripts/admin/addon/components/value-list.js

@@ -39,8 +39,8 @@ export default Component.extend({
   },
 
   actions: {
-    changeValue(index, newValue) {
+    changeValue(index, event) {
-      this._replaceValue(index, newValue);
+      this._replaceValue(index, event.target.value);
     },
 
     addValue(newValue) {

app/assets/javascripts/admin/addon/templates/components/secret-value-list.hbs

@@ -3,8 +3,8 @@
     {{#each this.collection as |value index|}}
       <div class="value" data-index={{index}}>
         <DButton @action={{action "removeValue"}} @actionParam={{value}} @icon="times" @class="remove-value-btn btn-small" />
-        <Input @value={{value.key}} class="value-input" {{on "focusout" (action "changeKey" index)}} />
+        <Input @value={{value.key}} class="value-input" {{on "focusout" (fn (action "changeKey") index)}} />
-        <Input @value={{value.secret}} class="value-input" @type={{if this.isSecret "password" "text"}} {{on "focusout" (action "changeSecret" index)}} />
+        <Input @value={{value.secret}} class="value-input" @type={{if this.isSecret "password" "text"}} {{on "focusout" (fn (action "changeSecret") index)}} />
       </div>
     {{/each}}
   </div>

app/assets/javascripts/admin/addon/templates/components/simple-list.hbs

@@ -4,7 +4,7 @@
       <div data-index={{index}} class="value">
         <DButton @action={{action "removeValue"}} @actionParam={{value}} @icon="times" @class="remove-value-btn btn-small" />
 
-        <Input title={{value}} @value={{value}} class="value-input" {{on "focusout" (action "changeValue" index)}} />
+        <Input title={{value}} @value={{value}} class="value-input" {{on "focusout" (fn (action "changeValue") index)}} />
 
         {{#if this.showUpDownButtons}}
           <DButton @action={{action "shift" -1 index}} @icon="arrow-up" @class="shift-up-value-btn btn-small" />

app/assets/javascripts/admin/addon/templates/components/value-list.hbs

@@ -4,7 +4,7 @@
       <div data-index={{index}} class="value">
         <DButton @action={{action "removeValue"}} @actionParam={{value}} @icon="times" @class="remove-value-btn btn-small" />
 
-        <Input title={{value}} @value={{value}} class="value-input" {{on "focusout" (action "changeValue" index)}} />
+        <Input title={{value}} @value={{value}} class="value-input" {{on "focusout" (fn (action "changeValue") index)}} />
 
         {{#if this.showUpDownButtons}}
           <DButton @action={{action "shift" -1 index}} @icon="arrow-up" @class="shift-up-value-btn btn-small" />

app/assets/javascripts/discourse/tests/integration/components/secret-value-list-test.js

@@ -1,4 +1,4 @@
-import { click, fillIn } from "@ember/test-helpers";
+import { blur, click, fillIn } from "@ember/test-helpers";
 import componentTest, {
   setupRenderingTest,
 } from "discourse/tests/helpers/component-test";
@@ -6,6 +6,7 @@ import {
   count,
   discourseModule,
   exists,
+  query,
   queryAll,
 } from "discourse/tests/helpers/qunit-helpers";
 import I18n from "I18n";
@@ -88,6 +89,43 @@ discourseModule(
       },
     });
 
+    componentTest("changing a value", {
+      template: hbs`{{secret-value-list values=values}}`,
+
+      async test(assert) {
+        this.set("values", "firstKey|FirstValue\nsecondKey|secondValue");
+
+        await fillIn(
+          ".values .value[data-index='1'] .value-input:first-of-type",
+          "changedKey"
+        );
+        await blur(".values .value[data-index='1'] .value-input:first-of-type");
+
+        assert.strictEqual(
+          query(".values .value[data-index='1'] .value-input:first-of-type")
+            .value,
+          "changedKey"
+        );
+
+        await fillIn(
+          ".values .value[data-index='1'] .value-input:last-of-type",
+          "changedValue"
+        );
+        await blur(".values .value[data-index='1'] .value-input:last-of-type");
+
+        assert.strictEqual(
+          query(".values .value[data-index='1'] .value-input:last-of-type")
+            .value,
+          "changedValue"
+        );
+        assert.deepEqual(
+          this.values,
+          "firstKey|FirstValue\nchangedKey|changedValue",
+          "updates the value list"
+        );
+      },
+    });
+
     componentTest("removing a value", {
       template: hbs`{{secret-value-list values=values}}`,
 

app/assets/javascripts/discourse/tests/integration/components/simple-list-test.js

@@ -1,4 +1,10 @@
-import { click, fillIn, triggerKeyEvent } from "@ember/test-helpers";
+import {
+  blur,
+  click,
+  fillIn,
+  render,
+  triggerKeyEvent,
+} from "@ember/test-helpers";
 import componentTest, {
   setupRenderingTest,
 } from "discourse/tests/helpers/component-test";
@@ -9,6 +15,7 @@ import {
   query,
 } from "discourse/tests/helpers/qunit-helpers";
 import hbs from "htmlbars-inline-precompile";
+import { test } from "qunit";
 
 discourseModule("Integration | Component | simple-list", function (hooks) {
   setupRenderingTest(hooks);
@@ -51,6 +58,26 @@ discourseModule("Integration | Component | simple-list", function (hooks) {
     },
   });
 
+  test("changing a value", async function (assert) {
+    const done = assert.async();
+
+    this.set("values", "vinkas\nosama");
+    this.set("onChange", function (collection) {
+      assert.deepEqual(collection, ["vinkas", "jarek"]);
+      done();
+    });
+
+    await render(hbs`{{simple-list values=values onChange=onChange}}`);
+
+    await fillIn(".values .value[data-index='1'] .value-input", "jarek");
+    await blur(".values .value[data-index='1'] .value-input");
+
+    assert.strictEqual(
+      query(".values .value[data-index='1'] .value-input").value,
+      "jarek"
+    );
+  });
+
   componentTest("removing a value", {
     template: hbs`{{simple-list values=values}}`,
 

app/assets/javascripts/discourse/tests/integration/components/value-list-test.js

@@ -6,7 +6,7 @@ import {
   discourseModule,
   query,
 } from "discourse/tests/helpers/qunit-helpers";
-import { click } from "@ember/test-helpers";
+import { blur, click, fillIn } from "@ember/test-helpers";
 import hbs from "htmlbars-inline-precompile";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 
@@ -39,6 +39,25 @@ discourseModule("Integration | Component | value-list", function (hooks) {
     },
   });
 
+  componentTest("changing a value", {
+    template: hbs`{{value-list values=values}}`,
+
+    beforeEach() {
+      this.set("values", "vinkas\nosama");
+    },
+
+    async test(assert) {
+      await fillIn(".values .value[data-index='1'] .value-input", "jarek");
+      await blur(".values .value[data-index='1'] .value-input");
+
+      assert.strictEqual(
+        query(".values .value[data-index='1'] .value-input").value,
+        "jarek"
+      );
+      assert.deepEqual(this.values, "vinkas\njarek", "updates the value list");
+    },
+  });
+
   componentTest("removing a value", {
     template: hbs`{{value-list values=values}}`,