[EuiTabbedContent] Fixed issue of TypeError #7350

elastic · Apr 25, 2024 · 6180a50 · 6180a50
1 parent 860764b
commit 6180a50
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 35 deletions.
diff --git a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap
@@ -8,8 +8,8 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t
   >
     <button
       aria-controls="generated-id"
-      aria-selected="true"
-      class="euiTab euiTab-isSelected emotion-euiTab-selected"
+      aria-selected="false"
+      class="euiTab emotion-euiTab"
       id="es"
       role="tab"
       type="button"
@@ -22,8 +22,8 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t
     </button>
     <button
       aria-controls="generated-id"
-      aria-selected="false"
-      class="euiTab kibanaTab emotion-euiTab"
+      aria-selected="true"
+      class="euiTab kibanaTab euiTab-isSelected emotion-euiTab-selected"
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
@@ -49,12 +49,12 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t
     </button>
   </div>
   <div
-    aria-labelledby="es"
+    aria-labelledby="kibana"
     id="generated-id"
     role="tabpanel"
   >
     <p>
-      Elasticsearch content
+      Kibana content
     </p>
   </div>
 </div>
@@ -132,8 +132,8 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
   >
     <button
       aria-controls="generated-id"
-      aria-selected="true"
-      class="euiTab euiTab-isSelected emotion-euiTab-selected"
+      aria-selected="false"
+      class="euiTab emotion-euiTab"
       id="es"
       role="tab"
       type="button"
@@ -146,8 +146,8 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
     </button>
     <button
       aria-controls="generated-id"
-      aria-selected="false"
-      class="euiTab kibanaTab emotion-euiTab"
+      aria-selected="true"
+      class="euiTab kibanaTab euiTab-isSelected emotion-euiTab-selected"
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
@@ -173,12 +173,12 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
     </button>
   </div>
   <div
-    aria-labelledby="es"
+    aria-labelledby="kibana"
     id="generated-id"
     role="tabpanel"
   >
     <p>
-      Elasticsearch content
+      Kibana content
     </p>
   </div>
 </div>
@@ -192,8 +192,8 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = `
   >
     <button
       aria-controls="generated-id"
-      aria-selected="true"
-      class="euiTab euiTab-isSelected emotion-euiTab-selected"
+      aria-selected="false"
+      class="euiTab emotion-euiTab"
       id="es"
       role="tab"
       type="button"
@@ -206,8 +206,8 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = `
     </button>
     <button
       aria-controls="generated-id"
-      aria-selected="false"
-      class="euiTab kibanaTab emotion-euiTab"
+      aria-selected="true"
+      class="euiTab kibanaTab euiTab-isSelected emotion-euiTab-selected"
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
@@ -233,12 +233,12 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = `
     </button>
   </div>
   <div
-    aria-labelledby="es"
+    aria-labelledby="kibana"
     id="generated-id"
     role="tabpanel"
   >
     <p>
-      Elasticsearch content
+      Kibana content
     </p>
   </div>
 </div>
@@ -252,8 +252,8 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = `
   >
     <button
       aria-controls="generated-id"
-      aria-selected="true"
-      class="euiTab euiTab-isSelected emotion-euiTab-selected"
+      aria-selected="false"
+      class="euiTab emotion-euiTab"
       id="es"
       role="tab"
       type="button"
@@ -266,8 +266,8 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = `
     </button>
     <button
       aria-controls="generated-id"
-      aria-selected="false"
-      class="euiTab kibanaTab emotion-euiTab"
+      aria-selected="true"
+      class="euiTab kibanaTab euiTab-isSelected emotion-euiTab-selected"
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
@@ -293,12 +293,12 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = `
     </button>
   </div>
   <div
-    aria-labelledby="es"
+    aria-labelledby="kibana"
     id="generated-id"
     role="tabpanel"
   >
     <p>
-      Elasticsearch content
+      Kibana content
     </p>
   </div>
 </div>
@@ -432,8 +432,8 @@ exports[`EuiTabbedContent props size can be small 1`] = `
   >
     <button
       aria-controls="generated-id"
-      aria-selected="true"
-      class="euiTab euiTab-isSelected emotion-euiTab-selected"
+      aria-selected="false"
+      class="euiTab emotion-euiTab"
       id="es"
       role="tab"
       type="button"
@@ -446,8 +446,8 @@ exports[`EuiTabbedContent props size can be small 1`] = `
     </button>
     <button
       aria-controls="generated-id"
-      aria-selected="false"
-      class="euiTab kibanaTab emotion-euiTab"
+      aria-selected="true"
+      class="euiTab kibanaTab euiTab-isSelected emotion-euiTab-selected"
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
@@ -473,12 +473,12 @@ exports[`EuiTabbedContent props size can be small 1`] = `
     </button>
   </div>
   <div
-    aria-labelledby="es"
+    aria-labelledby="kibana"
     id="generated-id"
     role="tabpanel"
   >
     <p>
-      Elasticsearch content
+      Kibana content
     </p>
   </div>
 </div>

diff --git a/src/components/tabs/tabbed_content/tabbed_content.tsx b/src/components/tabs/tabbed_content/tabbed_content.tsx
@@ -83,17 +83,17 @@ export class EuiTabbedContent extends Component<
 
     const { initialSelectedTab, selectedTab, tabs } = props;
 
-    // Only track selection state if it's not controlled externally.
-    let selectedTabId;
-    if (!selectedTab) {
-      selectedTabId =
-        (initialSelectedTab && initialSelectedTab.id) || tabs[0].id;
+    let selectedTabId =
+      (initialSelectedTab && initialSelectedTab.id) || tabs[1].id;
+    if (selectedTab) {
+      selectedTabId = selectedTab.id;
     }
 
     this.state = {
       selectedTabId,
       inFocus: false,
     };
+    console.log(this.state);
   }
 
   focusTab = () => {
@@ -138,6 +138,19 @@ export class EuiTabbedContent extends Component<
     }
   };
 
+  static getDerivedStateFromProps(
+    nextProps: EuiTabbedContentProps,
+    currentState: EuiTabbedContentState
+  ) {
+    if (!nextProps.tabs?.find((tab) => tab.id === currentState.selectedTabId)) {
+      return {
+        ...currentState,
+        selectedTabId: nextProps?.tabs[0]?.id,
+      };
+    }
+    return null;
+  }
+
   render() {
     const {
       className,