Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accordion doesn't open if you click it multipe times fast enough, and it loses track of state. #7775

Open
3 tasks
fidalgodev opened this issue Jun 17, 2023 · 8 comments · May be fixed by framer/motion#2265
Open
3 tasks

Accordion doesn't open if you click it multipe times fast enough, and it loses track of state. #7775

fidalgodev opened this issue Jun 17, 2023 · 8 comments · May be fixed by framer/motion#2265

Comments

@fidalgodev
Copy link

Description

If you click the accordion button 3 times fast, the accordion acts up and loses state. It stays closed, even tho the Arrow icon stays on the open state. Then you need to click it twice for it to open again (first for it to close, even tho the panel is not rendering, and then again to open normally):

Screen.Recording.2023-06-17.at.14.11.01.mov

JSX:

<Accordion allowToggle defaultIndex={[0]}>
  <AccordionItem>
    <AccordionButton>
      <Box as="span" flex="1">
        Accounts
      </Box>
      <AccordionIcon />
    </AccordionButton>
    <AccordionPanel flexDirection="column" display="flex">
      <NavLink as={NextLink} href={' '}>
        Monzo
      </NavLink>
      <NavLink as={NextLink} href={' '}>
        Starling
      </NavLink>
      <NavLink as={NextLink} href={' '}>
        Chase
      </NavLink>
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Link to Reproduction

N/A

Steps to reproduce

  1. Create an accordion
  2. Click 3 times fast on the Button that triggers the opening
  3. See the accordion panel not opening, even tho the arrow state is on the open state.
"@chakra-ui/next-js": "^2.1.4",
 "@chakra-ui/react": "^2.7.0",

Chakra UI Version

2.1.4 next-js, 2.7.0 react js

Browser

No response

Operating System

  • macOS
  • Windows
  • Linux

Additional Information

No response
@henriquesml henriquesml mentioned this issue Jul 1, 2023
Closed
@henriquesml
Copy link

Apparently, the issue occurs in the Collapse component due to the missing display. I've opened a fix proposition PR at #7819

@chuganzy
Copy link

chuganzy commented Jul 25, 2023 •
edited

There seems to be a race condition in framer-motion that is causing this to happen. Looking into it later.

UPDATE: confirmed that this does not happen with framer-motion v9.

@chuganzy chuganzy linked a pull request Jul 29, 2023 that will close this issue
Open
@nelsieborja
Copy link

The issue doesn't exist in your example though
https://chakra-ui.com/docs/components/transitions#collapse-transition

@chuganzy
Copy link

chuganzy commented Aug 30, 2023 •
edited

@nelsieborja That is because of the framer/motion's version that website relies on. It uses older one, which does not have this issue.

Ref: https://github.com/chakra-ui/chakra-ui-docs/blob/7e0869341db671880ea08ec74b84a93817f32845/package.json#L43

@stefanalexlupu
Copy link

Hi, I am also encountering this problem on nested accordions. I reproduced this issue here: https://codesandbox.io/s/nested-accordions-in-chakra-ui-59ncv4?file=/src/App.js

When an accordion is open, if you double click, it closes but the button remains in the open state

framer-motion v10 (mentioning this because comments above indicate it might be a framer motion issue)

@forrestwilkins
Copy link

@chuganzy Downgrading framer-motion to v9 worked for me as well.

@KrisAesoey KrisAesoey mentioned this issue Nov 7, 2023
Merged
@Nightbr
Copy link

Nightbr commented Jan 2, 2024

Same here, downgrading to framer-motion to v9 works.
We tested with latest framer-motion version v10.16.16 -> bug with the defaultIndex={[0]} not diplayed

@chuganzy
Copy link

chuganzy commented Jan 3, 2024 •
edited

FYI, I have an open PR that solves this issue here. framer/motion#2265

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

transitionEnd should not be applied when new animations caused the animation to stop chuganzy/motion
7 participants
@chuganzy @forrestwilkins @Nightbr @nelsieborja @stefanalexlupu @henriquesml @fidalgodev