fix(core/menu-about): set index if selected is set on tab-item (#1469)

Co-authored-by: Daniel Leroux <[email protected]>

.changeset/eighty-mails-collect.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/menu-about): set index if selected is set on tab-item

packages/core/src/components/menu-about/test/menu-about.ct.ts

@@ -0,0 +1,51 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+
+test('renders', async ({ mount, page }) => {
+  await mount(`
+      <ix-menu>
+        <ix-menu-about>
+          <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
+          <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
+        </ix-menu-about>
+      </ix-menu>
+    `);
+
+  const element = page.locator('#aboutAndLegal');
+  await element.click();
+
+  await page.getByText('Content 1').click();
+
+  const aboutAndLegal = page.locator('ix-menu-about');
+  await expect(aboutAndLegal).toHaveClass(/hydrated/);
+});
+
+test('active-tab-label', async ({ mount, page }) => {
+  await mount(`
+    <ix-application>
+      <ix-menu>
+        <ix-menu-about active-tab-label="Tab 2">
+          <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
+          <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
+        </ix-menu-about>
+      </ix-menu>
+    </ix-application>
+    `);
+
+  const element = page.locator('#aboutAndLegal');
+  await element.click();
+
+  const tabItems = page.locator('ix-tab-item');
+  await expect(tabItems.first()).toHaveClass(/hydrated/);
+
+  await expect(tabItems.first()).not.toHaveAttribute('selected', 'true');
+  await expect(tabItems.last()).toHaveAttribute('selected', 'true');
+});

packages/core/src/components/utils/menu-tabs/menu-tabs-fc.tsx

@@ -29,37 +29,44 @@ const getTabItems = (context: MenuSettings | MenuAbout) => {
   });
 };
 
-export const MenuTabs: FunctionalComponent<MenuTabsProps> = ({ context }) => (
-  <Host
-    slot={
-      context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about'
-    }
-    class={{
-      show: context.show,
-    }}
-  >
-    <div
-      class={
-        context instanceof MenuSettings ? 'settings-header' : 'about-header'
+export const MenuTabs: FunctionalComponent<MenuTabsProps> = ({ context }) => {
+  const selectedIndex = context.items.findIndex(
+    (item) => item.label === context.activeTabLabel
+  );
+  return (
+    <Host
+      slot={
+        context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about'
       }
+      class={{
+        show: context.show,
+      }}
     >
-      <h2 class="text-h2">{context.label}</h2>
-      <ix-icon-button
-        ghost
-        size="24"
-        icon={'close'}
-        onClick={(e) =>
-          context.close.emit({
-            name:
-              context instanceof MenuSettings
-                ? 'ix-menu-settings'
-                : 'ix-menu-about',
-            nativeEvent: e,
-          })
+      <div
+        class={
+          context instanceof MenuSettings ? 'settings-header' : 'about-header'
         }
-      ></ix-icon-button>
-    </div>
-    <ix-tabs>{getTabItems(context)}</ix-tabs>
-    <slot></slot>
-  </Host>
-);
+      >
+        <h2 class="text-h2">{context.label}</h2>
+        <ix-icon-button
+          ghost
+          size="24"
+          icon={'close'}
+          onClick={(e) =>
+            context.close.emit({
+              name:
+                context instanceof MenuSettings
+                  ? 'ix-menu-settings'
+                  : 'ix-menu-about',
+              nativeEvent: e,
+            })
+          }
+        ></ix-icon-button>
+      </div>
+      <ix-tabs selected={selectedIndex !== -1 ? selectedIndex : 0}>
+        {getTabItems(context)}
+      </ix-tabs>
+      <slot></slot>
+    </Host>
+  );
+};