React Form inside of Dialog: Model properties are not initially bound

Hi, I am new to Hilla and React. I think I have a very simple problem but I cannot figure it out. Any guidance would be appreciated.

I have created a very simple React component which can be seen here:
https://gist.github.com/loopforever/969afdc52f07ebaea053e1cd16253860

For some reason when the dialog is loaded, the model record which is passed in does not pre-populate the text field. Only after focusing on the text field, and then clicking outside of it does the model’s value visually appear (see attached GIF).

Any help would really be appreciated. Thank you!

It seems that read only works if the dialog and the contained input fields are already rendered. I’d suggest to report this as a bug here: https://github.com/vaadin/hilla/issues

As a workaround, you can delay calling read until after the dialog has been opened by adding a second useEffect that runs when the dialog’s opened state changes:

  useEffect(() => {
    if (dialogOpened) {
      read(family);
    }
  }, [dialogOpened]);