[Bug]: Flicker in AccordionItem children

[ibandare]

Package

carbon-components-react

Browser

Chrome

Package version

7.45.0

Description

We have a requirement to persist the Accordion state while navigating through the application, thus kept the expand/collapsed state in the redux store. After upgrading from v7.26.0 where it worked with no issues it started blinking when being expanded or collapsed (see screen recording attached):

Screen.Recording.2021-10-07.at.21.51.37.mov

While checking on the AccordionItem sources I noticed that changing the condition from

  if (open !== prevIsOpen) {
    setAnimation(isOpen ? 'collapsing' : 'expanding');
    setIsOpen(open);
    setPrevIsOpen(open);
  }

to

if (open !== isOpen) {...

resolves the issue.

CodeSandbox example

https://codesandbox.io/s/recursing-feather-4mglx?file=/src/index.js

Steps to reproduce

Just pass the open property and update it whenever an item is expanded/collapsed.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[antoinog]

Sandbox with issue. Click button , no flicker. Click header, flicker
https://codesandbox.io/s/quiet-rain-ruh6o?file=/package.json

Sandbox of 7.25 No flicker issue
https://codesandbox.io/s/cool-ride-p6o3e?file=/package.json

Possible reason:
#7876
setAnimate is called twice when header clicked, once in onclick, and once when open changes (if parent component saves state)

[ibandare]

will this ever be fixed? 😢

[tay1orjones]

To provide some context, this hasn't been addressed yet because it's lower priority. It's a cosmetic rendering issue that doesn't block the user from being able to open or close the accordion item.

Despite our best efforts every sprint, we can't get to every bug and some languish like this. I agree it's an eyesore and would like to see it fixed.

PRs are always welcome! There's some proposed solutions above that would make sense for someone to put into a PR to test out and review if interested.

[Kilian-Collender]

Any movement on this issue?

[tw15egan]

@Kilian-Collender no work has been done on this issue, but we'd welcome a PR if you have a fix in mind.

[cesardlinx]

I wanted to explore this issue but the moment I open storybook I get this error

I'm following all the steps in the CONTRIBUTING.md but the moment I try to run the development server I get those errors, I'm not sure what is wrong

[tw15egan]

@cesardlinx ensure you've run yarn build from the root of the monorepo, then cd packages/react and yarn storybook

[cesardlinx]

Hey @tw15egan thank you so much for your reply!. Yeah that was the first thing that I did but it didn't work, turns out that the one to blame was the OS, I was trying to run it on Windows and accordingly to this discussion #11042 thread there are extra steps in order to make it run on windows. But good news is that I switched to Linux and it runs smoothly! :D. I think we should consider to add that to the CONTRIBUTING.md.

Now talking about the issue, I was testing the component and it looks like this issue was already solved some time ago, I wasn't able to see any flickering, the component goes fine, only whenever I change line 151 of AccordionItem.tsx from this:
setAnimation(isOpen ? 'collapsing' : 'expanding');
to this:
setAnimation(isOpen ? 'expanding' : 'collapsing');
only then I experience flickering in the component. Maybe you should check it out

[Kilian-Collender]

@cesardlinx which version did you try.

I just tested with the original example using the latest stackblitz and I can still see the flashing

https://stackblitz.com/edit/github-zzfu6s?file=src%2FApp.jsx

[cesardlinx]

Thank you @Kilian-Collender for taking the time and for sharing that stackblitz example. Yeah! you're totally right, it helped me reproduce the problem and find the issue. Basically the flickering was only present the moment we were using it as a controlled component, but now it's fixed! :D. Here is my PR #14776