Skip to content

Commit

Permalink
fix(react-form): update the name of the rendered field when it changes
Browse files Browse the repository at this point in the history 
* fix(react-form): update the name of the rendered field when it changes

* ci: apply automated fixes and generate docs

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
  • Loading branch information
@fulopkovacs @autofix-ci
fulopkovacs and autofix-ci[bot] authored Jan 11, 2025
1 parent 3e88918 commit b5133f2
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 15 deletions.
30 changes: 15 additions & 15 deletions docs/reference/classes/fieldapi.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ Gets the field information object.

#### Defined in

[packages/form-core/src/FieldApi.ts:672](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L672)
[packages/form-core/src/FieldApi.ts:673](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L673)

***

Expand All @@ -169,7 +169,7 @@ getMeta(): FieldMeta

#### Defined in

[packages/form-core/src/FieldApi.ts:661](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L661)
[packages/form-core/src/FieldApi.ts:662](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L662)

***

Expand All @@ -191,7 +191,7 @@ Use `field.state.value` instead.

#### Defined in

[packages/form-core/src/FieldApi.ts:643](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L643)
[packages/form-core/src/FieldApi.ts:644](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L644)

***

Expand All @@ -209,7 +209,7 @@ Handles the blur event.

#### Defined in

[packages/form-core/src/FieldApi.ts:1024](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1024)
[packages/form-core/src/FieldApi.ts:1025](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1025)

***

Expand All @@ -233,7 +233,7 @@ Handles the change event.

#### Defined in

[packages/form-core/src/FieldApi.ts:1017](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1017)
[packages/form-core/src/FieldApi.ts:1018](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1018)

***

Expand Down Expand Up @@ -268,7 +268,7 @@ Inserts a value at the specified index, shifting the subsequent values to the ri
#### Defined in
[packages/form-core/src/FieldApi.ts:685](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L685)
[packages/form-core/src/FieldApi.ts:686](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L686)
***
Expand Down Expand Up @@ -325,7 +325,7 @@ Moves the value at the first specified index to the second specified index.
#### Defined in
[packages/form-core/src/FieldApi.ts:715](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L715)
[packages/form-core/src/FieldApi.ts:716](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L716)
***
Expand Down Expand Up @@ -353,7 +353,7 @@ Pushes a new value to the field.
#### Defined in
[packages/form-core/src/FieldApi.ts:677](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L677)
[packages/form-core/src/FieldApi.ts:678](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L678)
***
Expand Down Expand Up @@ -381,7 +381,7 @@ Removes a value at the specified index.
#### Defined in
[packages/form-core/src/FieldApi.ts:703](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L703)
[packages/form-core/src/FieldApi.ts:704](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L704)
***
Expand Down Expand Up @@ -416,7 +416,7 @@ Replaces a value at the specified index.
#### Defined in
[packages/form-core/src/FieldApi.ts:694](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L694)
[packages/form-core/src/FieldApi.ts:695](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L695)
***
Expand All @@ -440,7 +440,7 @@ Updates the field's errorMap
#### Defined in
[packages/form-core/src/FieldApi.ts:1044](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1044)
[packages/form-core/src/FieldApi.ts:1045](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1045)
***
Expand All @@ -464,7 +464,7 @@ Sets the field metadata.
#### Defined in
[packages/form-core/src/FieldApi.ts:666](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L666)
[packages/form-core/src/FieldApi.ts:667](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L667)
***
Expand Down Expand Up @@ -492,7 +492,7 @@ Sets the field value and run the `change` validator.
#### Defined in
[packages/form-core/src/FieldApi.ts:650](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L650)
[packages/form-core/src/FieldApi.ts:651](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L651)
***
Expand Down Expand Up @@ -527,7 +527,7 @@ Swaps the values at the specified indices.
#### Defined in
[packages/form-core/src/FieldApi.ts:709](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L709)
[packages/form-core/src/FieldApi.ts:710](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L710)
***
Expand Down Expand Up @@ -575,4 +575,4 @@ Validates the field value.
#### Defined in
[packages/form-core/src/FieldApi.ts:989](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L989)
[packages/form-core/src/FieldApi.ts:990](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L990)
1 change: 1 addition & 0 deletions packages/form-core/src/FieldApi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -634,6 +634,7 @@ export class FieldApi<
}

this.options = opts as never
this.name = opts.name
}

/**
Expand Down
89 changes: 89 additions & 0 deletions packages/react-form/tests/useField.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,95 @@ describe('useField', () => {
expect(queryByText(onBlurError)).toBeInTheDocument()
})

it('should properly update conditionally rendered fields', async () => {
type FormValues = {
firstField: string
secondField: string
showFirstField: boolean
}

function Comp() {
const form = useForm({
defaultValues: {
firstField: '',
secondField: '',
showFirstField: true,
} as FormValues,
})

return (
<>
<form.Field name="showFirstField">
{({ handleChange, state }) => (
<div>
<span>Show first field</span>
<input
data-testid="show-first-field"
checked={state.value}
type="checkbox"
onChange={(e) => {
handleChange(e.target.checked)
}}
/>
</div>
)}
</form.Field>
<form.Subscribe selector={(state) => state.values.showFirstField}>
{(someFlagChecked) => {
if (someFlagChecked) {
return (
<form.Field name="firstField">
{({ handleChange, state }) => (
<label>
first field
<input
data-testid="first-field"
value={state.value}
onChange={(e) => handleChange(e.target.value)}
/>
</label>
)}
</form.Field>
)
}

return (
<form.Field name="secondField">
{({ handleChange, state }) => (
<label>
second field
<input
data-testid="second-field"
value={state.value}
onChange={(e) => handleChange(e.target.value)}
/>
</label>
)}
</form.Field>
)
}}
</form.Subscribe>
</>
)
}

const { getByTestId } = render(<Comp />)

const showFirstFieldInput = getByTestId('show-first-field')

await user.type(getByTestId('first-field'), 'hello')
expect((getByTestId('first-field') as HTMLInputElement).value).toBe('hello')

await user.click(showFirstFieldInput)
await user.type(getByTestId('second-field'), 'world')
expect((getByTestId('second-field') as HTMLInputElement).value).toBe(
'world',
)

await user.click(showFirstFieldInput)
expect((getByTestId('first-field') as HTMLInputElement).value).toBe('hello')
})

it('should validate async on change', async () => {
type Person = {
firstName: string
Expand Down

0 comments on commit b5133f2

Please sign in to comment.