FormItem position and value issues when setting visibility

[martinisraelsen]

Have a form with FormItems. The FormItems are set to be visible/invisible based on user selection(s). For example, if the user selects "address" the FormItem with the address field is set to visible and the phone number is set to invisible. If the user selects "phone" the address field is set to invisible and the phone number is set to visible.

Changing visible this way causes several problems:

• FormItem Label is missing
• Component placeholder text is missing
• Label and Component is not aligned with other FormItems labels and components
• Component value is missing or not displayed.

This issue exists in V10 and V11 alpha 1 and beta 1.

Source code and video clip attached

FormItemIssue.zip

[martinisraelsen]

This issue also exists in V12 and V13 all the way to V13.0.3. I have verified that the issue occurs in the major browsers (Safari, Firefox, Chrome).

To reproduce:
Run the attached file with Jetty:run and open your browser.

• Click "Add Customer"
• Change "Type" to "User"
• Hidden fields are being shown and they are not aligned. Resizing the window realigns the fields correctly.

Vaadin-Appstarter.zip

The same app demo can also be used to provoke the missing fields in Safari (#5446)

[martinisraelsen]

Note: It looks like it may be caused by the fields being set to not visible before being shown. If you "Add User" which has all fields visible, they will show up correctly.

When you "Add Customer", some fields (FormItems) are set to not visible and when they later are set to visible (e.g. by changing the type) their position is off.

[martinisraelsen]

Also noticed the issue in the Flow Project Wizard (https://labs.vaadin.com/project-wizard/) on an iPad. Notice that the form fields are jumbled together at the top.

[martinisraelsen]

@denis-anisimov Should this issue be logged in https://github.com/vaadin/vaadin-form-layout? If so are you able to move it over?

[denis-anisimov]

Issue moved to vaadin/vaadin-form-layout-flow #92 via ZenHub