Easyadminbundle: Issues with form tabs and some input types (video and demo repo)

[liarco]

Describe the bug
I'm having issues with some input types:

• form validation helpers fail when tabs are used in combination with complex fields (e.g. choice, text-editor, code-editor, fileupload, VichUploader, etc.). Tabs should show a counter of missing fields, but this doesn't work
• fileupload field (the beautiful new-entry from @yceruto) seems to have some alignment issues _(see video below)_
• code-editor field has broken styles when used in combination with tabs _(see video below)_
• text-editor: https://github.com/EasyCorp/EasyAdminBundle/issues/2862#issuecomment-515186960

You can quickly check these issues here: https://youtu.be/U0XonpvMAUk

To Reproduce
Clone this demo repository: https://github.com/liarco/easy-admin-issues

Run the following commands to initialize and run the project:

composer install
./init.sh
symfony local:server:start

Follow along the video above.

Thank you for your time.

[yceruto]

Thank you for providing us with all those details !!

fileupload field (the beautiful new-entry from @yceruto) seems to have some alignment issues

Fixed in https://github.com/EasyCorp/EasyAdminBundle/pull/2863

I'll check the others issues...

[liarco]

Thank you for working on this! ;)

There's one more issue that I forgot to list above: the text-editor seems to send an empty value and causes a "NOT NULL constraint failed" error (this is shown in the video and documented in the code).
It's similar to an earlier bug that was related to the name/full_name attribute value, but now it must be something else...

I'm gonna update this ticket if I find any clue...

[yceruto]

Thanks for update ! I just noted that the CodeEditor is not updating the textarea value properly, hence it send null. I'm on it...

[yceruto]

Resolved finally in https://github.com/EasyCorp/EasyAdminBundle/pull/2864

[yceruto]

Could you please check if #2863 + #2864 fix the issue? In addition, I've improved the UX a bit by showing the first tab that contains errors in https://github.com/EasyCorp/EasyAdminBundle/pull/2865, thanks.

[liarco]

Sure, I'm gonna test this as soon I'm back home!

[liarco]

Ok, I tested #2863 + #2864 + #2865 on the same demo project:

• [x] form validation with tabs is now working as intended (didn't have time to add a specific test for VichUploaderBundle, I hope to have time to do it tomorrow)
• [x] fileupload is now aligned correctly and the "remove" button is not counted as a required field anymore
• [x] code-editor styles are fixed
• [x] text-editor is fixed _(I spot a typo in my entity code that was causing the DB query to fail: the setTextEditor() method was broken, sorry for that)_

Your PRs fix the issue, I'm just concerned about one thing: if you leave a standard HTML input empty the browser highlights it telling you that it's missing a value, on the other hand custom fields do not have any "invalid" class or visual feedback except for the red-dot that tells they're required.
Maybe adding a .has-error class to the div.form-group can help giving a consistent visual feedback... what do you think? _(this is not implemented yet via JS, but it's already supported by the standard fields thanks to bootstrap so it would require custom CSS just for inputs like text_editor, code_editor and fileupload, etc.)_

[liarco]

Tested VichUploaderBundle (vich_image field): validation works as intended!

[liarco]

Pull requests #2863 and #2864 fix the original issues and have just been merged.

I hope to do the right thing closing this issue and opening a new feature request for the thing I pointed out here: https://github.com/EasyCorp/EasyAdminBundle/issues/2862#issuecomment-515270069

Thank you