Form inside TabSheet causes "Maximum update depth exceeded"

Hilla
1

There is simple input field inside TabSheet compoonent:

export default function GateFormTabs({ gate }: Readonly<Props>) {

	const { field, model } = useForm(GateResponseModel);

	if (!gate) {
		return <div>No gate selected</div>
	}

	return (
		<TabSheet style={{ height: '40%' }}>
			<TabSheetTab label="General options">
				<VerticalLayout className="w-full">
						<TextField
							label="Unique internal gate ID"
							{...field(model.gateId)}
						/>
				</VerticalLayout>
			</TabSheetTab>
		</TabSheet>
	);
}

and this example causes “Maximum update depth exceeded” error.
If I comment component (leave only TabSheetTab) it renderers successfully.
Is it a bug or I do something wrong?

Hilla 24.7.3

2

Couldn’t reproduce this from a quick test just with the components alone (without useForm). I would suggest to double-check if the error reproduces if you remove the field binding from the text field. If not, then it seems more likely to be a Hilla form issue.

3

Without {…field(model.gateId)} it works successfull.
The problem is when TabSheet combined with field()

4

Does it work if you wrap the form into its own function having the useForm declared inside that function?

5

Sorry, what do you mean?

6

Extract this part to function together with useForm.

7

It works, but how can I get control for all the form in different tabs in that way?

8

As a workarond suggested from https://vaadin-docs-assistant.fly.dev/ this example works:

export default function TabbedForm() {
   const activeTab = useSignal(0);
const { field, model } = useForm(SmppGateResponseModel);

    return (
        <div>
            <Tabs selected={activeTab.value} onSelectedChanged={(e) => activeTab.value = e.detail.value}>
                <Tab>General Info</Tab>
                <Tab>Details</Tab>
            </Tabs>

            {activeTab === 0 && (
                <FormLayout>
                    <TextField
						label="Unique internal gate ID"
						{...field(model.gateId)}
					/>
                </FormLayout>
            )}

            {activeTab === 1 && (
                <FormLayout>
                    <TextArea label="Description" data-colspan="2" />
                    <DatePicker label="Start Date" />
                    <DatePicker label="End Date" />
                </FormLayout>
            )}
        </div>
    );
}