Tab Trigger as Remix Link

[hauptrolle]

Hello 👋

if I want to use the Tabs component to be used as a navigation with Remix Link Component the Tabs.Inficator animation sometimes breaks (on the first clicks). Also the navigation with the arrow keys work, but I cant active the links with enter or space.

Here is an example repo: https://stackblitz.com/edit/remix-ark-tabs

Any ideas why this breaks?

[cschroeter]

@hauptrolle

You using a controlled Tabs component but only rely on the value being updated by the path. Replace value with defaultValue and you should be good to go: https://stackblitz.com/edit/remix-ark-tabs-juhbuz?file=app%2Froot.tsx

[hauptrolle]

Nice, looks like the navigation works now. Thank you! 👍
But ... when navigating with the arrow keys, the links are not triggered 😞

[cschroeter]

Mhh you have to press enter. Imagine you would switch pages only by using arrow keys 😁

[hauptrolle]

I thought so too, but neither enter nor space works 🙈

[cschroeter]

Could be an issue. So I've checked the docs and so actually using arrow keys should update the content. To prevent that you can set activationMode to manual

So I think it has something to do with anchor vs button I will have a look shortly.

[segunadebayo]

Using controlled tabs needs an equivalent onValueChange callback to be added to trigger the page navigation.

Here's a working code:

export default function App() {
  const { pathname } = useLocation();
  const navigate = useNavigate();
  const lastPathFragment = pathname.substring(pathname.lastIndexOf('/') + 1);
  const activeTab = lastPathFragment.length > 0 ? lastPathFragment : 'homepage';

  return (
    <Document>
      <Tabs.Root
        activationMode="manual"
        value={activeTab}
        onValueChange={({ value }) => {
          navigate(`/${value === 'homepage' ? '' : value}`);
        }}
        className="mx-auto my-6"
      >
        {/*...*/}
    </Document>
  );
}

Here's the Stackblitz demo: https://stackblitz.com/edit/remix-ark-tabs-5ffyg7?file=app%2Froot.tsx

The Tab Indicator works, and you can even do without activationMode="manual" in the code.

[hauptrolle]

Hey @segunadebayo 👋
But whats the point of the asChild prop on the Tab.Trigger then?
The link and the onValueChange seems kind of redundant.