Form Binding (FirstNameComponent example) renders "undefined", crashes with nullable fields

[Pascalmh]

Describe the bug

I’m trying to create my own Form Components (Text-Input, Select-Boxes, etc.)

I copied the “FullNameComponent” from the docs - when using it as it is it renders the String “undefined” as the content of the -Element.

When I'm adding another property to the PersonModel that's nullable:

@Nullable
private Location location;

that takes a private String streetName and I'm passing that to the FullNameComponent via the fullNameModel-prop I'm getting this error:

Error: Should have a queue. This is likely a bug in React. Please file an issue.

I've pushed a reproduction repo here (Branch: custom-text-input-component) with just the "initial commit" with the code from the "skeleton-starter-hilla-react-24.zip" and a second commit that reproduces the issues I'm facing.

https://github.com/Pascalmh/vaadin-storybook/tree/custom-text-input-component

Expected-behavior

Using the FullNameComponent copied from the docs works the same as using the Hilla TextField component.

Reproduction

Repo: https://github.com/Pascalmh/vaadin-storybook/tree/custom-text-input-component Commit: https://github.com/Pascalmh/vaadin-storybook/commit/550a1289830ebfff2f83d76c2497996df7707e89

System Info

macOS 14.5, Vaadin 24.4.8, ARC 1.56.0 (Chromium Engine Version 127.0.6533.120)

[taefi]

It seems to work as intended, explained here: https://vaadin.com/forum/t/form-binding-firstnamecomponent-example-renders-undefined-as-input-value/166913/4

[platosha]

One idea to fix this bug is to initialise all the primitive value keys to their respective defaults.

[taefi]

#2713 fixed the crash issue, but still the problem of rendering the literal string 'undefined' remains open.