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 <Header> 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>
)

}
                    
                    ``` 

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.