React ValidatedField wrapping to Row, Col for multi column view

[gcdus]

Overview of the issue

If we try to arrange form fields in column view in other words if we wrap ValidatedField to Row and Col tag, the field values are not populated during Edit mode of the page and the same is true for insert mode. On the existing user management page, we are trying to see Last Name and First Name in one row, and we are unable to see the value or update the value if we realign these fields in multiple columns views. A screenshot of the sample view and code is attached to the following stackoverflow link.

https://i.stack.imgur.com/VfJ2R.png

Motivation for or Use Case

We were able to arrange the fields and wrap them into Row, Col as needed on the earlier version of Jhipster, and it seems that we are not able to arrange the form layout anymore with ValidatedForm and ValidatedField.

Reproduce the error

Under the user management page update TSX file, try to wrap Last Name and First Name in one row with two columns as like on the screenshot attached to the StackOverflow link provided.

Related issues

I've searched on Stackoverflow and couldn't find any related issue.

Suggest a Fix

It seems that ValidatedForm is not considering Row as a child in React-jhipster and only looking for direct child ValidatedField, hence any element wrapped on

or or <> is not being considered as a react element.

JHipster Version(s)

7.3.1

JHipster configuration

.yo-rc.json file

                                                                                                                       
{                                                                                                                           
  "generator-jhipster": {                                                                                                   
    "applicationType": "monolith",                                                                                          
    "baseName": "ilogics",                                                                                                  
    "jhipsterVersion": "7.3.1",                                                                                             
    "skipClient": false,                                                                                                    
    "skipServer": false,                                                                                                    
    "skipUserManagement": false,                                                                                            
    "skipCheckLengthOfIdentifier": false,                                                                                   
    "skipFakeData": false,                                                                                                  
    "jhiPrefix": "jhi",                                                                                                     
    "entitySuffix": "",                                                                                                     
    "dtoSuffix": "DTO",                                                                                                     
    "testFrameworks": ["cypress"],                                                                                          
    "blueprints": [],                                                                                                       
    "otherModules": [],                                                                                                     
    "pages": [],                                                                                                            
    "creationTimestamp": 1635085621771,                                                                                     
    "serviceDiscoveryType": "no",                                                                                           
    "reactive": false,                                                                                                      
    "authenticationType": "jwt",                                                                                            
    "packageName": "com.test",                                                                                       
    "serverPort": "8080",                                                                                                   
    "cacheProvider": "ehcache",                                                                                             
    "enableHibernateCache": false,                                                                                          
    "databaseType": "sql",                                                                                                  
    "devDatabaseType": "mysql",                                                                                             
    "prodDatabaseType": "mysql",                                                                                            
    "buildTool": "maven",                                                                                                   
    "serverSideOptions": [],                                                                                                
    "websocket": false,                                                                                                     
    "searchEngine": false,                                                                                                  
    "messageBroker": false,                                                                                                 
    "enableSwaggerCodegen": false,                                                                                          
    "clientFramework": "react",                                                                                             
    "withAdminUi": true,                                                                                                    
    "clientTheme": "flatly",                                                                                                
    "clientThemeVariant": "primary",                                                                                        
    "enableTranslation": true,                                                                                              
    "nativeLanguage": "en",                                                                                                 
    "jwtSecretKey": "YourJWTSecretKeyWasReplacedByThisMeaninglessTextByTheJHipsterInfoCommandForObviousSecurityReasons",    
    "devServerPort": 9060,                                                                                                  
    "clientPackageManager": "npm",                                                                                          
    "languages": ["en", "es"],                                                                                              
    "enableGradleEnterprise": false,                                                                                        
    "entities": [                                                                                                           
      "Business",                                                                                                           
      "BusinessContact"                                                                                                    
    ],                                                                                                                      
    "lastLiquibaseTimestamp": 1637418492000                                                                                 
  }                                                                                                                         
}                                                                                                                           

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

No error on entity creation.

Browsers and Operating System

Windows 11, Google Chrome, Edge

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

[gcdus]

I've just found that this issue is related to #15588 and #16755.

[emilpaw]

Currently ValidatedField and ValidatedInput must be direct children of ValidatedForm. If you want to nest the Inputs in other Components you need to use useForm directly, similar to what ValidatedForm does under the hood.

I made a small example to show how to make the form from your screenshot work: emilpaw/jhipster-react-nested-form-inputs-example@78edc39

It might be possible to make nested inputs work out of the box.

[gcdus]

Thanks emilpaw, this works like a charm and we are able to arrange the layout as needed based on slight twist as per your sample. appreciated your effort and help.

[deepu105]

The wrappers are just utilities to reduce duplicated code, for any additional usecase please use the library directly as its already integrated and will work seamlessly

[gcdus]

@DanielFran, is it something going to be fixed in Jhipster's future release so we don't need to change the code on each auto-generated page to arrange the fields in multiple columns? I've tested with release 7.9.3 and it seems we still cannot add Row and Col tags inside the ValidatedForm.

[Tcharl]

Can you please take a look at this future PR? #19560
I would like to get your thought on it: on one side it's a little more verbose (You have to pass the react-use-form elements to each components) but it seems that it will handle your use case.

Best

[gcdus]

I'm not the react expert but I would say with basic functionality like arranging form in multiple columns which were working fine in previous releases of Jhipster has been removed on the latest version is definitely a concern. I have tried the solution provided by @emilpaw but I've recently found that automated code generated for entities is not the same as the user management module where @emilpaw has provided the reference code. I'm having numerous difficulties like when we arrange the form in multiple columns, and when we click on View or Edit from the list page and when we go back and click on "New", the state is not cleared and it always shows the previously viewed or edited value on the new form. This is definitely a huge change on each of the Jhipster-generated front-end pages if we need this basic re-arranging functionality, which I believe does not make any sense. I would appreciate it if anyone provides the reference for entity-generated pages and the entity would be simple like first name, last name, and address where first name and last name are arranged in a 50 percent column on first raw.