Content editing screen errors when Radio field and Tab divider have same name

[john-thomas-dotcms]

Describe the bug

When you create a Radio button field and a Tab divider with the same friendly name (e.g. both are named "Profile"), then depending on where you place the field and how you drag it in the content type editor, the content editing screen can either display completely blank, or the radio button can display so that the options are not all selectable.

In both cases, errors in the browser console indicate that there's some kind of a conflict with dojo id==profile1.

Steps to reproduce the behavior:

1. Create a new content type (base type Content)
   • Add a text field named "Title".
   • Add a radio button named "Profile".
     • Give it two values; I used the following in the Value field:
       Option 1|one
       Option 2|two
     • Set it to User Searchable and Show in List
       • I'm not sure these values matter, but they're the values I used
     • Note: The problem happens no matter what you name the radio button, as long as you name the tab divider the same thing.
   • Close the content type editor.
2. Open the content search screen
   • Create two new content items of the new content type
     • One one, leave the radio button unselected
     • On the second one, select the second value on the radio button
     • Save and Publish both content items
3. Re-edit the content type.
   • Delete the Profile radio button.
   • Add a new tab named Profile
   • Add a radio button named Profile
   • Delete both the tab and the radio button named Profile
   • Add a radio button named Profile
   • Add a tab named Profile
   • Close the content type
4. Open the content search screen
5. Click on one of the existing content items to edit it
   • Result (good so far): The popup displays without problems
   • Click on the Profile tab
     • Problem 1: The second option on the radio button is grayed out, and can't be selected.
       • Browser console errors: https://gist.github.com/john-thomas-dotcms/878954028bea6cc6edc6c6020074ed9b
     • Important: This problem only happens if the tab divider is named the same as the radio button; if you name the tab divider something else, then this radio button displays and works properly.
   • Close the content editing screen
6. Go back to the content type editor and re-open the content type.
   • Drag the Profile radio button back up to the main row (above the Profile tab divider).
   • Close the content type.
7. Go back to the content search screen, and edit one of the existing content items
   • Problem 2: The popup opens, but remains blank.
     • Browser console errors: https://gist.github.com/john-thomas-dotcms/192d331e310087b478e3889263c97c0d

Expected behavior

The Content Type editing screen and/or the content editing screen need to handle the fact that the tab and the field are named the same.

Note that the problem could be caused by either of the screens, because:

• In this case, it appears that the content type editor properly distinguished the Velocity var names of the field (profile) and the tab divider (profile1), so the problem might be in the content editing screen rather than the content type editor.
• But on our authoring server, the pre-existing Documentation content type has almost exactly this same setup (a WYSIWYG field with the velocity var name of documentation and a tab divider with the velocity var name of documentation), and does not have any problems... so it's possible the problem is being caused somehow by the content type editor.

Screenshots

Problem 1

Problem 2

Desktop (please complete the following information):

• OS: Win 10 Pro
• Browser: Chrome
• dotCMS Version: 5.2.6 (authoring and demo)

Additional context

You might be able to remove a step or two from the above steps to reproduce, but I don't have time to isolate it further. But the steps above will consistently reproduce the problem on demo.

Acceptance Criteria

1. Match the design
2. Work in all the supported browsers (don't forget IE11 and iPad)
3. Multilanguage
4. Unit test

[nollymar]

PR: #18454

[nollymar]

Passed internal QA. The issue was tested following the described steps. Everything works as expected

[bryanboza]

Fixed, tested on release-5.3.1 // Postgres // FF. Tested following the provided steps and after the changes I'm unable to reproduce