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

This commit is contained in:
Jarek Radosz 2022-07-08 13:00:33 +02:00 committed by GitHub
parent a084680f1d
commit 20851f7240
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 104 additions and 14 deletions

View File

@ -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");
},

View File

@ -24,8 +24,8 @@ export default Component.extend({
},
@action
changeValue(index, newValue) {
this.collection.replace(index, 1, [newValue]);
changeValue(index, event) {
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")

View File

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

View File

@ -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.secret}} class="value-input" @type={{if this.isSecret "password" "text"}} {{on "focusout" (action "changeSecret" 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" (fn (action "changeSecret") index)}} />
</div>
{{/each}}
</div>

View File

@ -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" />

View File

@ -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" />

View File

@ -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}}`,

View File

@ -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}}`,

View File

@ -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}}`,