DEV: exposes parentName and name in onSet (#32000)

This allows more flexibility for custom behaviours.

Example usage:

```gjs
@action
onSet(value, { set, name }) {
  set(name + ".0.baz", value * 2)
}

<form.Object @name="something" as |object|>
  <object.Field @name="foo" @title="Foo" @onSet={{onSet}} as |field|>
    <field.Input />
  </object.Field>
</form.Object>
```
This commit is contained in:
Joffrey JAFFEUX
2025-03-25 18:20:36 +01:00
committed by GitHub
parent f01a658101
commit 8fc2b74bf0
2 changed files with 15 additions and 8 deletions
@@ -68,6 +68,8 @@ export default class FKFieldData extends Component {
if (this.args.onSet) { if (this.args.onSet) {
await this.args.onSet(value, { await this.args.onSet(value, {
set: this.args.set, set: this.args.set,
name: this.name,
parentName: this.args.parentName,
index: this.args.collectionIndex, index: this.args.collectionIndex,
}); });
} else { } else {
@@ -288,22 +288,27 @@ module("Integration | Component | FormKit | Field", function (hooks) {
test("@onSet", async function (assert) { test("@onSet", async function (assert) {
const onSetWasCalled = assert.async(); const onSetWasCalled = assert.async();
const onSet = async (value, { set }) => { const onSet = async (value, { name, parentName, set }) => {
assert.form().field("foo").hasValue("bar"); assert.deepEqual(name, "something.foo");
assert.deepEqual(parentName, "something");
await set("foo", "baz"); assert.form().field("something.foo").hasValue("bar");
await set("something.foo", "baz");
await settled(); await settled();
assert.form().field("foo").hasValue("baz"); assert.form().field("something.foo").hasValue("baz");
onSetWasCalled(); onSetWasCalled();
}; };
await render( await render(
<template> <template>
<Form as |form|> <Form @data={{hash something=(hash foo=1)}} as |form|>
<form.Field @name="foo" @title="Foo" @onSet={{onSet}} as |field|> <form.Object @name="something" as |object|>
<field.Input /> <object.Field @name="foo" @title="Foo" @onSet={{onSet}} as |field|>
</form.Field> <field.Input />
</object.Field>
</form.Object>
</Form> </Form>
</template> </template>
); );