Problem

  1. Using field_group to group fields used in a Paragraph bundle using horizontal tabs.
  2. I'm arranging all my Paragraph bundles using a common scheme; eg. 'Group1', 'Group2', 'Group3'.
  3. The machine name of each set of tabs is therefore the same for multiple Paragraph bundles: eg. group_group1, group_group2 etc.
  4. The machine name of each group is used to set the containing element ID.
  5. The current version of field_group uses the ID of each group to target the correct horizontal tab.
  6. As Multiple Paragraph items can be added to any node, there's a likelihood that multiple tab groups will share the same ID (/machine name).
  7. In these cases, selecting a tab will activate the first instance of the tab type on the page, leading to a confusing admin experience.

Proposed resolution

  • Provide unique ID for each tab group or target with reference to the tab that's firing the click event.
CommentFileSizeAuthor
#18 unique_id_for_tab_elements-2941010-18.patch4.42 KBlukus
#12 unique_id_for_tab_elements-2941010-12.patch706 byteslukus
#6 unique_id_for_tab_elements-2941010-#6.patch706 byteslukus

Comments

lukus created an issue. See original summary.

lukus’s picture

lukus
he/him
commented

Happy to contribute a fix, but would like to know whether this problem is known (and / or what the preferred resolution would be).

scottsawyer’s picture

scottsawyer
Primary language English
Location Atlanta
commented

I just noticed this on a site I am currently building. In my case, I have paragraphs which have field groups ( tabs in this case ) that contain settings for things like background color or text color.

Paragraph 1 - tab = Background Color
Paragraph 2 - tab = Background Color

If you are editing Paragraph 2, and click the tab "Background Color", the tab in Paragraph 1 is triggered. Both tabs seem to behave otherwise, but what commonly happens is, when you are editing Paragraph 2, suddenly you are looking at Paragraph 1's Background color. I have set the background color on the wrong paragraph several times before I realized that I wasn't actually going crazy. If it's confusing for me, it will completely confound my ( totally inexperienced ) editors.

I haven't dug into the module's code just yet to see what kind of selectors are used for the triggers, but if it is #id and we're running into some sort of duplicate ID issue, then we definitely need to consider a more robust solution.

My initial thoughts ( without having actually looked at the code yet ), is use some sort of UUID for the ID.

I haven't actually confirmed this quite yet, maybe my issue is different and maybe it has something else to do with the JavaScript.

lukus’s picture

lukus
he/him
commented

I agree .. fundamentally, we have a situation where the same ID is being used multiple times in one document. Fixing this is probably the most efficient way of resolving the problem.

I know there was a function that could be called in D7 to ensure that an ID is unique .. will check to see if the same exists for D8.

L

lukus’s picture

lukus
he/him
commented

https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Component%21Util...

lukus’s picture

lukus
he/him
commented
StatusFileSize
new unique_id_for_tab_elements-2941010-#6.patch706 bytes

Patch attached. Making use of Html:getUniqueId to ensure ID is unique.

Solves issue mentioned above.

lukus’s picture

lukus
he/him
commented
Assigned: Unassigned » lukus
Status: Active » Needs review
lukus’s picture

lukus
he/him
commented
Version: 8.x-3.0-beta1 » 8.x-3.x-dev
scottsawyer’s picture

scottsawyer
Primary language English
Location Atlanta
commented

great job lukus, it seems to be working for me in my brief test.

lukus’s picture

lukus
he/him
commented
Status: Needs review » Reviewed & tested by the community

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 6: unique_id_for_tab_elements-2941010-#6.patch, failed testing. View results

lukus’s picture

lukus
he/him
commented
StatusFileSize
new unique_id_for_tab_elements-2941010-12.patch706 bytes

Rerolled patch.

lukus’s picture

lukus
he/him
commented
Status: Needs work » Needs review

  • zuuperman committed 1c83584 on 8.x-3.x authored by lukus 
    Issue #2941010 by lukus: Markup ID of each tab is not unique
nils.destoop’s picture

nils.destoop commented
Status: Needs review » Fixed

This was a duplicate of #2904577: Duplicate CSS ID confuses behat and is now fixed for all type of groups. Lukus, I reverted my commit of 2904577 and recommited + a credit on your name.

lukus’s picture

lukus
he/him
commented

Hi @zuuperman, thanks for commiting this.

I've encountered what seems like a bug in the current dev release (https://www.drupal.org/project/field_group/issues/2993664)

Bearing this in mind, I'm going to roll a patch against current beta release so I can move ahead with current project I'm working on.

lukus’s picture

lukus
he/him
commented
Version: 8.x-3.x-dev » 8.x-3.0-beta1
lukus’s picture

lukus
he/him
commented
StatusFileSize
new unique_id_for_tab_elements-2941010-18.patch4.42 KB

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

lukus’s picture

lukus
he/him
commented

This issue is still occuring for me.