< Return to Feed
Scott Reinhardt - 03.16.2017

Fix for a Bug in the Tabs Container

Fix for a Bug in the Tabs Container in Adobe Enterprise Manager


On the surface, the business requirement appeared simple: In Adobe Enterprise Manager (AEM), reorganize the properties in the dialog box into sub-categories. In execution, however, this proved to not be so simple, due to a bug in Adobe Enterprise Manager (AEM). This was the desired end result:




A few hours of development revealed the bug: If you have a granite/UI/components/foundation/layouts/tabs container nested inside a second granite/UI/components/ foundation/layouts/tab container, when you select a parent tab, it also tries to select the child tab resulting in no active tabs in the container.

For example, in the below, Tab A (in bold) is the active tab while Tab C contains child sub-tabs 1, 2, and 3, with Tab 1 (in bold) being an active tab: 

Tab A   Tab B   Tab C

                      Tab 1  Tab 2  Tab 3

If you select child-Tab C, it also tries to select Tab 3 on the child, deselecting Tab 1, which is the active tab. As a result, there are no longer any active tabs in the child container. 

The solution was to copy the granite/UI/components/foundation/layouts/tabs and change the data-init to a new name (I used hotfixtabs).

I then registered a new CUI widget: 


(function ($, window, undefined) {
    CUI.Hotfix = CUI.Hotfix || {};

    var CLASS_PANE_LIST = 'coral-TabPanel-content',
      CLASS_TAB_LIST = 'coral-TabPanel-navigation',


	CUI.Hotfix.Tabs = new Class(/** @lends CUI.Tabs# */{
    	toString: 'HotfixTabs',

    	extend: CUI.Tabs,

     	_findOrCreateTabList: function() {
      var element = this.$element.children(SELECTOR_TAB_LIST);
      if (element.length === 0) {
        element = $('<nav>')
      return element;

    _findOrCreatePaneList: function() {
      var element = this.$element.children(SELECTOR_PANE_LIST);
      if (element.length === 0) {
        element = $('<div>')
      return element;


	CUI.Widget.registry.register("hotfixtabs", CUI.Hotfix.Tabs);

    // Data API
  if (CUI.options.dataAPI) {
    $(document).on('cui-contentloaded.data-api', function (event) {
      CUI.Hotfix.Tabs.init($('[data-init~=hotfixtabs]', event.target));

}(jQuery, this));

The main granite component checks for all children with the css class and deactivates them.  The fixed version here only checks the direct children, so nesting is fixed.