diff --git a/.changeset/eighty-mails-collect.md b/.changeset/eighty-mails-collect.md new file mode 100644 index 0000000000..f34a0126f6 --- /dev/null +++ b/.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 diff --git a/packages/core/src/components/menu-about/test/menu-about.ct.ts b/packages/core/src/components/menu-about/test/menu-about.ct.ts new file mode 100644 index 0000000000..49f23c3859 --- /dev/null +++ b/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(` + + + Content 1 + Content 2 + + + `); + + 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(` + + + + Content 1 + Content 2 + + + + `); + + 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'); +}); diff --git a/packages/core/src/components/utils/menu-tabs/menu-tabs-fc.tsx b/packages/core/src/components/utils/menu-tabs/menu-tabs-fc.tsx index 81e337157b..4ec23ce4ab 100644 --- a/packages/core/src/components/utils/menu-tabs/menu-tabs-fc.tsx +++ b/packages/core/src/components/utils/menu-tabs/menu-tabs-fc.tsx @@ -29,37 +29,44 @@ const getTabItems = (context: MenuSettings | MenuAbout) => { }); }; -export const MenuTabs: FunctionalComponent = ({ context }) => ( - -
= ({ context }) => { + const selectedIndex = context.items.findIndex( + (item) => item.label === context.activeTabLabel + ); + return ( + -

{context.label}

- - context.close.emit({ - name: - context instanceof MenuSettings - ? 'ix-menu-settings' - : 'ix-menu-about', - nativeEvent: e, - }) +
-
- {getTabItems(context)} - -
-); + > +

{context.label}

+ + context.close.emit({ + name: + context instanceof MenuSettings + ? 'ix-menu-settings' + : 'ix-menu-about', + nativeEvent: e, + }) + } + > +
+ + {getTabItems(context)} + + +
+ ); +};