Next.js Discord

Discord Forum

Shadcn Mount-unmount tabs

Unanswered
African Slender-snouted Crocodil… posted this in #help-forum
Open in Discord
African Slender-snouted CrocodileOP
I have a scenario in which i want to display 2 components in differents Tabs using shadcn
since there is a lot of code, I will display only the important parts
<Tabs
          defaultValue='static'
          className='w-full mt-4'
          onValueChange={(value) => {
            setShowTab(value);
          }}
        >
          <TabsList>
            <TabsTrigger value='static'>Static Overlays</TabsTrigger>
            <TabsTrigger value='dynamic'>Dynamic Overlays</TabsTrigger>
          </TabsList>
          <TabsContent
            value='static'
            forceMount
            className={`${showTab !== "static" ? "hidden" : ""}`}
          >
            <UserOverlayTab
              setOverlayModal={setOverlayModal}
              selectedLanguage={selectedLanguage}
              selectedOverlays={selectedOverlays}
              setSelectedOverlays={setSelectedOverlays}
              setSelectedLanguage={setSelectedLanguage}
              setQuery={setQuery}
              mutate={mutate}
              setVideoModal={setVideoModal}
              overlays={overlays}
              setLoading={setLoading}
            />
          </TabsContent>
          <TabsContent
            value='dynamic'
            forceMount
            className={`${showTab !== "static" ? "" : "hidden"}`}
          >
            <DynamicOverlayTab
              setSelectedOverlays={setSelectedOverlays}
              selectedOverlays={selectedOverlays}
              overlays={overlays.filter((item) => item.type === "customizable")}
              mutate={mutate}
              setVideoModal={setVideoModal}
              setLoading={setLoading}
            />
          </TabsContent>
        </Tabs>

this tab is inside a GeneralModal :

10 Replies

African Slender-snouted CrocodileOP
<Modal isOpen={!!modal} onClose={handleClose}>
      {modal === "hooks" && (
        <HooksTable selectedHooks={state.hooks} setSelectedHooks={setState} />
      )}
      {modal === "bodies" && (
        <BodiesTable
          selectedBodies={state.bodies}
          setSelectedBodies={setState}
        />
      )}
      {modal === "ctas" && (
        <CtaTable
          selectedCtas={state.ctas}
          setSelectedCtas={setState}
          setSelectedLanguage={setSelectedLanguage}
          selectedLanguage={selectedLanguage}
        />
      )}
      {modal === "overlays" && (
        <OverlaysTable
          selectedLanguage={selectedLanguage}
          setSelectedLanguage={setSelectedLanguage}
          selectedOverlays={state.overlays}
          setSelectedOverlays={setState}
        />
      )}
      {modal === "voices" && (
        <VideoSettings
          selectedLanguage={selectedLanguage}
          setSelectedLanguage={setSelectedLanguage}
          selectedVoices={state.voices}
          setSelectedVoices={setState}
        />
      )}
      {modal === "audios" && (
        <BackgroundMusic
          selectedAudios={state.audios}
          setSelectedAudios={setState}
          selectedLanguage={selectedLanguage}
          setSelectedLanguage={setSelectedLanguage}
        />
      )}
    </Modal>
this is the modal
the issue is that, everytime i change the tab in the tablist, the generalModal closes ... as well
from what I've understood, it's because of the way mounting works around the tabs in shadcn, but is there any way I can make it not reset the state everytime i change the tab so it doesnt call a re-render? 🤔
@Arinji Maybe u know shadcn? 👀 😂
Arinji
sorry dont use shadcn much.. also no need to ping me, if its something ik i will join it
African Slender-snouted CrocodileOP
no so, the tab component is inside a modal, and each tab renders another component, the issue is that when i change the tab, the modal closes
joulev
the way i see it, your modal is controlled, then all you need to do is to assure the modal state is truthy – so just log or display the value of the modal state and see if it changes
radix modals don't close by themselves once controlled unless you click on a Dialog.Close or outside the modal or similar
Korat
Hi @African Slender-snouted Crocodile, you can add forceMount prop to the tab content and do hide logic using hidden prop.

https://www.radix-ui.com/primitives/docs/components/tabs