fix(tabs): not able to stop tab switcing when controlled

[Barsnes]

Summary

resolves #4617

I added a storybook story as well. We can remove this, but I think it's nice to have, In that story you can never select tab 2

Checks

• I have read the contribution guidelines
• I have added a changeset (run pnpm changeset if relevant)

[changeset-bot]

🦋 Changeset detected

Latest commit: 4f6a79d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@digdir/designsystemet-react	Patch
@digdir/designsystemet	Patch
@digdir/designsystemet-css	Patch
@digdir/designsystemet-types	Patch
@digdir/designsystemet-web	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Preview deployments for this pull request:

storybook - 19. Mar 2026 - 09:04

[mimarz]

onChange is triggered twice with the same value. This happens when opening story and when clicking on "the other" tab.

export function TabsTest(): ReactElement {
  const tabName1 = 'tab1';
  const tabName2 = 'tab2';
  const [selectedTab, setSelectedTab] = useState<string>(tabName1);

  const handleChange = (tabName: string) => {
    if (
      confirm('Are you sure you want to select another tab?')
    ) {
      setSelectedTab(tabName);
    }
  };

  return (
    <Tabs value={selectedTab} onChange={handleChange}>
      <Tabs.List>
        <Tabs.Tab value={tabName1}>Tab 1</Tabs.Tab>
        <Tabs.Tab value={tabName2}>Tab 2</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value={tabName1}>Content of tab 1</Tabs.Panel>
      <Tabs.Panel value={tabName2}>Content of tab 2</Tabs.Panel>
    </Tabs>
  );
}

Looks like onClick on ds-tab is triggering twice in both use-cases.
Adding the isTrusted check back seemed to resolve the problem. 😅
Any reason why we only check isTrusted for onChange before? 🤔
Anyhow, rolling back that change seemed to fix it.

onClick={(e: MouseEvent<DSTabElement>) => {
  if (e.isTrusted) {
    onChange?.(value); // Only call onChange is user actually clicked, not when programmatically clicked/controlled
  }
  onClick?.(e);
}}

[mimarz]

Suggested change

	expect(onChange).toHaveBeenCalledWith('value2');
	expect(onChange).toHaveBeenCalledWith('value2');
	expect(onChange).toHaveBeenCalledOnce();

[Barsnes]

onChange is triggered twice with the same value. This happens when opening story and when clicking on "the other" tab.

export function TabsTest(): ReactElement {
  const tabName1 = 'tab1';
  const tabName2 = 'tab2';
  const [selectedTab, setSelectedTab] = useState<string>(tabName1);

  const handleChange = (tabName: string) => {
    if (
      confirm('Are you sure you want to select another tab?')
    ) {
      setSelectedTab(tabName);
    }
  };

  return (
    <Tabs value={selectedTab} onChange={handleChange}>
      <Tabs.List>
        <Tabs.Tab value={tabName1}>Tab 1</Tabs.Tab>
        <Tabs.Tab value={tabName2}>Tab 2</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value={tabName1}>Content of tab 1</Tabs.Panel>
      <Tabs.Panel value={tabName2}>Content of tab 2</Tabs.Panel>
    </Tabs>
  );
}

Looks like onClick on ds-tab is triggering twice in both use-cases. Adding the isTrusted check back seemed to resolve the problem. 😅 Any reason why we only check isTrusted for onChange before? 🤔 Anyhow, rolling back that change seemed to fix it.

onClick={(e: MouseEvent<DSTabElement>) => {
  if (e.isTrusted) {
    onChange?.(value); // Only call onChange is user actually clicked, not when programmatically clicked/controlled
  }
  onClick?.(e);
}}

I rolled it back, but changed it sightly

[mimarz]

LGTM 👍

Suggest adding the suggestion for test as to guard ourselves (or other developers) from removing the isTrusted in the future :)

[Barsnes]

LGTM 👍

Suggest adding the suggestion for test as to guard ourselves (or other developers) from removing the isTrusted in the future :)

It has been added

[mimarz]

LGTM 👍
Suggest adding the suggestion for test as to guard ourselves (or other developers) from removing the isTrusted in the future :)

It has been added

ahh, didn't catch that as the suggestion was still up. Superduper!