[BUG] - Tab component animation not working inside Modal component

[LangRizkie]

NextUI Version

2.2.9

Describe the bug

Tab change animation working fine if its implemented outside Modal component, I've tried forking a Modal sandbox to make it clear that is not my code breaking the animation.

Your Example Website or App

https://codesandbox.io/p/devbox/elegant-tesla-dqxd7y

Steps to Reproduce the Bug or Issue

1. Create Modal component
2. Insert Tab component inside modal body

Expected behavior

We expecting the animation still working even inside the modal

Screenshots or Videos

No response

Operating System Version

Windows 10

Browser

Chrome

[macoo10]

Hi @LangRizkie,

I had the same problem. There is a conflict with the property scale of framer motion. If you override the "motionProps" attribute and remove the "scale property" it will work.

[joris-delorme]

The bug come from here:

https://github.com/nextui-org/nextui/blob/main/packages/components/modal/src/modal-transition.ts

scale: "var(--scale-enter)" // = scale: "100%"
scale: "var(--scale-exit)" // = scale: "103%"

But it seems that framer-motion doesn't like «%» ...

Here is solution:

import { Modal, ModalContent, ModalBody, Tabs, Tab } from '@nextui-org/react'
import { TRANSITION_EASINGS } from "@nextui-org/framer-transitions";

            <Modal motionProps={{
                variants: {
                    enter: {
                        scale: 1,
                        y: "var(--slide-enter)",
                        opacity: 1,
                        transition: {
                          scale: {
                            duration: 0.4,
                            ease: TRANSITION_EASINGS.ease,
                          },
                          opacity: {
                            duration: 0.4,
                            ease: TRANSITION_EASINGS.ease,
                          },
                          y: {
                            type: "spring",
                            bounce: 0,
                            duration: 0.6,
                          },
                        },
                      },
                      exit: {
                        scale: 1.1, // NextUI default 1.03
                        y: "var(--slide-exit)",
                        opacity: 0,
                        transition: {
                          duration: 0.3,
                          ease: TRANSITION_EASINGS.ease,
                        },
                      },
                }

            }} placement="center" isOpen={isOpen} onOpenChange={onOpenChange}>
                <ModalContent>
                    <ModalBody>
                        <Tabs
                            //selectedKey={settings.tutoiement ? "tutoiement" : "vouvoiement"} // for performence reasons
                            onSelectionChange={
                                (e) => {
                                    setSettings(old => ({ ...old, tutoiement: e === "tutoiement" }))
                                }
                            }
                            fullWidth
                            radius="full"
                            aria-label="Tabs radius"
                            className='max-w-full w-full'
                        >
                            <Tab key="tutoiement" title="Tutoiement" className='max-w-full w-full' />
                            <Tab key="vouvoiement" title="Vousvoiement" className='max-w-full w-full' />
                        </Tabs>
                    </ModalBody>
                </ModalContent>

PS: I think one parenthesis is too many here: https://github.com/nextui-org/nextui/blob/main/packages/components/modal/src/modal-transition.ts#L6

[J4v4Scr1pt]

Omg, I was pulling my hair on this one.. after some testing I come to the same conclusion.. the Modal don't like tabs. Is there any ETA on a permanent fix for this?

[unav4ila8le]

Modal is not working correctly when tabs are placed in it. +1

[LAICHEEHOONG]

Add a useEffect and useState setTimeout to delay and then re-renders the tabs.

const [showTabs, setShowTabs] = useState(false); useEffect(... setTimeout)

return showTabs && <Tabs ..... />

[LangRizkie]

Add a useEffect and useState setTimeout to delay and then re-renders the tabs.

const [showTabs, setShowTabs] = useState(false); useEffect(... setTimeout)

return showTabs && <Tabs ..... />

It's not a permanent solution, and it will be repeated. Not quite the best practice to implement

[snoopy1412]

same issue

[LAICHEEHOONG]

Ya same issue, after that I use mui in nextui modal🙂‍↔️

snoopy1412 @.***>于2024年8月14日 周三上午8:10写道：

same issue

— Reply to this email directly, view it on GitHub https://github.com/nextui-org/nextui/issues/2297#issuecomment-2287464167, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALMMVU2CVF7SL5SYGCTKOY3ZRKN55AVCNFSM6AAAAABCQQTMKOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBXGQ3DIMJWG4 . You are receiving this because you commented.Message ID: @.***>

[LucaSorvillo]

The bug come from here:

https://github.com/nextui-org/nextui/blob/main/packages/components/modal/src/modal-transition.ts

scale: "var(--scale-enter)" // = scale: "100%"
scale: "var(--scale-exit)" // = scale: "103%"

But it seems that framer-motion doesn't like «%» ...

Here is solution:

import { Modal, ModalContent, ModalBody, Tabs, Tab } from '@nextui-org/react'
import { TRANSITION_EASINGS } from "@nextui-org/framer-transitions";

            <Modal motionProps={{
                variants: {
                    enter: {
                        scale: 1,
                        y: "var(--slide-enter)",
                        opacity: 1,
                        transition: {
                          scale: {
                            duration: 0.4,
                            ease: TRANSITION_EASINGS.ease,
                          },
                          opacity: {
                            duration: 0.4,
                            ease: TRANSITION_EASINGS.ease,
                          },
                          y: {
                            type: "spring",
                            bounce: 0,
                            duration: 0.6,
                          },
                        },
                      },
                      exit: {
                        scale: 1.1, // NextUI default 1.03
                        y: "var(--slide-exit)",
                        opacity: 0,
                        transition: {
                          duration: 0.3,
                          ease: TRANSITION_EASINGS.ease,
                        },
                      },
                }

            }} placement="center" isOpen={isOpen} onOpenChange={onOpenChange}>
                <ModalContent>
                    <ModalBody>
                        <Tabs
                            //selectedKey={settings.tutoiement ? "tutoiement" : "vouvoiement"} // for performence reasons
                            onSelectionChange={
                                (e) => {
                                    setSettings(old => ({ ...old, tutoiement: e === "tutoiement" }))
                                }
                            }
                            fullWidth
                            radius="full"
                            aria-label="Tabs radius"
                            className='max-w-full w-full'
                        >
                            <Tab key="tutoiement" title="Tutoiement" className='max-w-full w-full' />
                            <Tab key="vouvoiement" title="Vousvoiement" className='max-w-full w-full' />
                        </Tabs>
                    </ModalBody>
                </ModalContent>

PS: I think one parenthesis is too many here: https://github.com/nextui-org/nextui/blob/main/packages/components/modal/src/modal-transition.ts#L6

It works, Thanks man! 👏

[melodyxpot]

It's working. Thanks. Very helpful.