fix(CQ-4340781): Blank screen for view Page Properties - Coral Tab no…

…t being selected (#197)
adobe · Feb 7, 2022 · 9615b03 · 9615b03
1 parent 15a6b3c
commit 9615b03
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/coral-component-tablist/src/scripts/Tab.js b/coral-component-tablist/src/scripts/Tab.js
@@ -185,14 +185,10 @@ const Tab = Decorator(class extends BaseLabellable(BaseComponent(HTMLElement)) {
   }
 
   set selected(value) {
-    let _selected = transform.booleanAttr(value);
+    value = transform.booleanAttr(value);
 
-    if(this._selected === _selected) {
-      return;
-    }
-
-    if (!_selected || _selected && !this.disabled) {
-      this._selected = _selected;
+    if (!value || value && !this.disabled) {
+      this._selected = value;
       this._reflectAttribute('selected', this.disabled ? false : this._selected);
 
       this.classList.toggle('is-selected', this._selected);

diff --git a/coral-component-tablist/src/scripts/TabList.js b/coral-component-tablist/src/scripts/TabList.js
@@ -149,9 +149,7 @@ class TabList extends BaseComponent(HTMLElement) {
       this._target = value;
 
       // we do in case the target was not yet in the DOM
-      !(this._setTargetInQueue === true) && window.requestAnimationFrame(() => {
-        delete this._setTargetInQueue;
-
+      window.requestAnimationFrame(() => {
         const realTarget = getTarget(this._target);
         // we add proper accessibility if available
         if (realTarget) {
@@ -194,7 +192,6 @@ class TabList extends BaseComponent(HTMLElement) {
           }
         }
       });
-      this._setTargetInQueue = true;
     }
   }
 
@@ -395,9 +392,7 @@ class TabList extends BaseComponent(HTMLElement) {
   }
 
   _setLine() {
-    !(this._setLineInQueue === true) && window.requestAnimationFrame(() => {
-      delete this._setLineInQueue;
-
+    window.requestAnimationFrame(() => {
       const selectedItem = this.selectedItem;
 
       // Position line under the selected item
@@ -433,8 +428,6 @@ class TabList extends BaseComponent(HTMLElement) {
       }
       this._previousOrientation = this.orientation;
     });
-
-    this._setLineInQueue = true;
   }
 
   /** @private */

diff --git a/coral-component-tabview/src/scripts/TabView.js b/coral-component-tabview/src/scripts/TabView.js
@@ -128,11 +128,29 @@ const TabView = Decorator(class extends BaseComponent(HTMLElement) {
         tagName: 'coral-panelstack',
         insert: function (panels) {
           this.appendChild(panels);
+          this._onNewPanelStack(panels);
         }
       });
     }
   }
 
+  /**
+   * This helps in syncing the tablist with new panelstack.
+   * This helpful when panelstack is changed for tabview dynamically. 
+   * @param {PanelStack} panels new/updated panelstack
+   */
+  _onNewPanelStack(panels) {
+    const tabs = this._elements.tabList;
+
+    // Bind the tablist and panel stack together, using the panel id
+    panels.id = panels.id || commons.getUID();
+    tabs.setAttribute('target', `#${panels.id}`);
+
+    if(tabs.selectedItem) {
+      tabs.selectedItem.selected = true;
+    }
+  }
+
   /**
    Detects a change in the TabList and triggers an event.