React - ValidatedForm values are empty if ValidatedField is not a direct child

[mohamedzaki90]

Overview of the issue

Try adding the form fields in a nested element div or Col and then submit the form, the value associated with that field is not submitted or empty

<ValidatedForm>
<Col>
<ValidatedField name="somename" ...../>
</Col>
</ValidatedForm>

Motivation for or Use Case

This is important for styling the generated forms and also nesting components

Reproduce the error

Generate a monolith application with react client, add any entity and try to adjust the generated entity-update.tsx ValidatedForm with the suggested change above. i.e add a column above any form field and try submitting any value

Related issues

https://github.com/jhipster/generator-jhipster/issues/15588

Suggest a Fix

JHipster Version(s)

7.3.0

JHipster configuration

Entity configuration(s) entityName.json files generated in the .jhipster directory

Browsers and Operating System

• [x] Checking this box is mandatory (this is just to show you read everything)

[qmonmert]

@mohamedzaki90 it's not a JHipster issue

JHipster generates:

<ValidatedForm ...>
    <ValidatedField ... />
    <ValidatedField ... />
    <ValidatedField ... />
    ...
    <Button ... />
</ValidatedForm>

and it works

[mohamedzaki90]

I didn't say that the generated code is not working, I meant customization by adding nested elements does not work Try wrapping any field inside a div

[qmonmert]

ok maybe look this lib https://github.com/jhipster/react-jhipster

[mohamedzaki90]

It's not possible to open an issue in the react-jhipster repo, possibly I don't have permissions?

[qmonmert]

strange cc @pascalgrimaud

[mshima]

It's not possible to open an issue in the react-jhipster repo, possibly I don't have permissions?

Issues is not enable there. Should be posted here.

[pascalgrimaud]

Yes it's not strange, it's normal @qmonmert It's for centralizing all issues, so it's to have more visibility

[kristo-aun-cko]

The react-jhipster/validated-form.tsx says "The validated fields/inputs must be direct children of the form."

The children object needs recursive traversal like so:

const isValidatedChild = (child) => {
    const type = child?.type;
    return type
      && child?.props?.name
      && ['ValidatedField', 'ValidatedInput', 'ValidatedBlobField'].includes(type.displayName);
  };

  const isButton = (child) => {
    const type = child?.type?.name;
    return type && ['Button'].includes(type);
  };

  const conditionalCallback = (child, callback) => {
    if (isButton(child) || isValidatedChild(child)) {
      return callback(child)
    }
    return;
  };

  const mapRecursive = (currentChildren, callback) => (
    React.Children.map(
      currentChildren,
      child => (
        child?.props?.children
         ?
          [ conditionalCallback(child, callback), mapRecursive(child.props.children, callback)]
          : conditionalCallback(child, callback)
      ),
    )
  );

  return (
    <Form onSubmit={handleSubmit(onSubmit)} {...rest}>
      {mapRecursive(children, (child: ReactElement) => {
        const type = child?.type as any;

Sorry for the unformatted code snippet, can't figure out the github code formatting util.

[deepu105]

This is not supported and that's why the comment is there. What we provide is just convenient wrappers. If you want to nest children and stuff, I suggest you use the library directly. Supporting this in Jhipster directly is too much work and not worth the effort as you can easily do it using the library