Content not switching when using components within TabsContent

[brentrobbins]

For some reason the tabs are not switching content when you use a component within TabsContent. For example if you have something like the following you will see the same

component content when you select either tab. It only shows the first tab content's header even when you click the second tab, but the content within the p tag will switch.

<Tabs defaultValue="register">
        <TabsList>
          <TabsTrigger value="register">Register</TabsTrigger>
          <TabsTrigger value="games">Past Games</TabsTrigger>
        </TabsList>
        <TabsContent value="register">
          <section>
            <Heading
              title='Register for the next upcoming game'
              text='Dolor elit voluptate proident incididunt labore sint cillum.'
            />
            <p>Tab One</p>
          </section>
        </TabsContent>
        <TabsContent value="games">
          <section>
            <Heading
              title='View Previous Games'
              text='Dolor elit voluptate proident incididunt labore sint cillum.'
            />
            <p>Tab Two</p>
          </section>
        </TabsContent>
      </Tabs>

[Danazumi]

This works perfectly fine on chrome, i think it is a browser issue

[paullotz]

Same for me, works on the Documentation page of shadcn-ui, but locally the tab switch is not working

[Sambalicious]

@brentrobbins. I am experiencing the same issue. were you able to resolve it?

[brentrobbins]

@brentrobbins. I am experiencing the same issue. were you able to resolve it?

Not yet.

[grctest]

I was experiencing this today due to hydration issues - had to enable "client:load" in astro for it to work, keep up the good work :)

[Zonalds]

Same issue, using Nextjs.

I noticed the tab doesn't handle active automatically and isn't aware of which tab is active. You will have to handle these your self.

on react, it would be:

import { useState } from "react";

export function Tab(){
const [openTab, setOpenTab] = useState("reply")

return(
<Tabs
 defaultValue="reply"
 value={openTab}
 onValueChange={setOpenTab}
 className="w-full p-2">
    <TabsList className="grid w-2/6 grid-cols-2 rounded-lg">
        <TabsTrigger className={openTab === "reply" && "bg-white text-gray-900"} value="reply">Reply</TabsTrigger>
         <TabsTrigger className={openTab === "note" && "bg-white text-gray-900"} value="note">Note</TabsTrigger>
    </TabsList>
     <TabsContent value="reply">
       <p>Reaply</p>
    </TabsContent>

   <TabsContent value="note">
       <p>Reaply</p>
   </TabsContent>
)

}