Nextjs link component not working together with Tabs

[mmailaender]

We're using the nextjs link component inside of Tabs.Item and this is leading to some weird click-zone problem

Green: The URL will be updated Red: The URL will be not updated

import { Tabs } from 'reshaped';
import Link from 'next/link';

<Tabs
  variant="borderless"
  defaultValue={path.includes("templates") ? "1" : "0"}
>
  <Tabs.List>
    <Tabs.Item value="0" icon={<Docs />}>
      <Link href="/" passHref>
        Documents
      </Link>
    </Tabs.Item>
    <Tabs.Item value="1" icon={<Template />}>
      <Link href="/templates" passHref>
        Templates
      </Link>
    </Tabs.Item>
  </Tabs.List>
</Tabs>;

If we're wrapping Tabs.Item into Link then the active marker (underline) stops working

<Tabs
  variant="borderless"
  defaultValue={path.includes("templates") ? "1" : "0"}
>
  <Tabs.List>
    <Link href="/" passHref>
      <Tabs.Item value="0" icon={<Docs />}>
        Documents
      </Tabs.Item>
    </Link>
    <Link href="/templates" passHref>
      <Tabs.Item value="1" icon={<Template />}>
        Templates
      </Tabs.Item>
    </Link>
  </Tabs.List>
</Tabs>;

[mmailaender]

Any news on this? @blvdmitry

I've checked the problem a bit more - <Tabs.Item> renders a div => button => <span> => <div>, and the latest <div> is not filling the <Tabs.Item in height, so obviously I can't expand my link component more than the parent div

<span class="Tabs_buttonContent__ezZEx"> // <Tabs.Item>
  <div class=" Text_root__SNugT Text_--variant-body-3__GmJp2"> // <Tabs.Item>
    <a href="/" class="w-full h-full">Very long item 1</a> // my code
  </div> // <Tabs.Item>
</span> // <Tabs.Item>

Alternatively, you could provide a href prop for the <Tabs.Item> component - only not sure how to cover the <Link> specific behaviors.

[blvdmitry]

Looking at this issue for 2.3. Working with href still needs a Link wrapper to I'll look in ref forwarding and correct styles

[blvdmitry]

Also in case it's blocking right now, it should be possible to call next router methods inside the onChange handler

[mmailaender]

Thx for the hint - We have decided already two months ago to go with a custom tabs components. So we are not blocked, but I would like to eliminate this workaround 🙂

[blvdmitry]

Got it working, was a fun challenge for sure, going to release a patch this week

https://github.com/formaat-design/reshaped/assets/887379/424f56b0-0943-4758-a0b3-c125196f94db

<Tabs defaultValue="1">
    <Tabs.List>
        <NextLink href="#hey" passHref legacyBehavior>
            <Tabs.Item value="1">Hey</Tabs.Item>
        </NextLink>
        <NextLink href="#hello" passHref legacyBehavior>
            <Tabs.Item value="2">Hello</Tabs.Item>
        </NextLink>
    </Tabs.List>
</Tabs>