October: Multidimensional tabs not rendering properly

[SebastiaanKloos]

Expected behavior

Multidimensional tabs working and rendering fine.

Actual behavior

The tabs are not rendering how it should be. The data-target and id of the tab-pane is not the same. Causing the tab to not show up is you click it.

Reproduce steps

Add two tabs to your backend form containing only one partial with relationRender() to a model that also has tabs in fields.yaml.

October build

Latest (376)

[SebastiaanKloos]

Copy paste of my stackoverflow question:

I have three tabs which contains hasOne relations in a partial. But multidimensional tabs are not working properly. The first parent tab with a relation containing child tabs does work properly. But the second is not working. The tab-pane does not get the class active. I guess this is a Javascript problem but it is really frustrating. Maybe someone is experiencing the same problem. Any help would be appreciated. I am stuck with my plugin.

I tried to use secondary tabs in the partials containing the relation. So you would have primary tabs with relations containing a form with secondary tabs.

I guess that this causes the problem:

Primary tab one

data-target=“tabs14761-tab-01478891082323” id=“tabs14761-tab-01478891082323”

Primary tab two

data-target=“tabs14761-tab-11478891082325” id=“tabs14761-tab-11478891082325”

Primary tab three

data-target=“tabs14761-tab-21478891082326” id=“tabs14761-tab-41478891082327”

As you see, the data-target and id of tab three is not the same. Maybe this is causing the problem. If I manually add the class active to the tab-pane the tab is being showed. So the rendering of the tab logic is not working as it should be.

Hope someone can help me with this problem!

[SebastiaanKloos]

I followed the code in the Form widget in the backend module. It looks like it is an Javascript problem as I see that the Javascript is rendering the data-target attribute. The hash it generates is not the correct one. Now I know the error is being produced by october.form.js. I will investigate this a bit further.

[daftspunk]

This is a complex case. Please submit a Pull Request to the test plugin for investigation that demonstrates the issue. Don't forget to include step by step instructions how how to replicate it _using the test plugin_.

[SebastiaanKloos]

@daftspunk I have submitted a Pull Request of the test plugin for investigation. You can see the problem in "People". When you click on the "Phone" tab the "Phone" content is being loaded in the tab content. When you click "Tab3" the content is not being loaded.

I hope this will show you the problem. When you inspect the elements, you will see that the data-target of the "Phone" tab button is not the same as the "ID" of the tab-pane.

Hope this is being fixed soon as I am stuck in developing my plugin.

[SebastiaanKloos]

@daftspunk If you can point me the wright direction, I can take a look at where the problem is.

[daftspunk]

Thanks for this.

Confirmed

A nested tab plugin's tabs are leaking in to the parent tab plugin.

Replication

https://github.com/daftspunk/oc-test-plugin/pull/26

[daftspunk]

This should be fixed in Build 382+ (f4f7355bf23d786937bc6b454dc7bdc1a4dba911)