Decorated component's className not changed after receiving new props

[Elanhant]

Hello! I was trying to animate a sidebar using GSAP decorator. Aside from animation, this sidebar also can be hidden via changing the className basing on component props. But for some reason, the decorated component not always renders with the updated class. When I inspect element, it still shows the old class, although in the React Developer Tools I see the new className prop.

Here's the code of my component:

import React from 'react';
import GSAP from 'react-gsap-enhancer';

const animations = {
  intro: function({target, options}){

    let tl = new TimelineMax()
      .from(target,     1,  {opacity:0});

    return tl;
  }
};

@GSAP
export default class Sidebar extends React.Component{
  componentDidMount() {
    this.addAnimation(animations.intro);
  }

  render() {
    const className = 'sidebar' + (this.props.visible ? ' sidebar--visible' : '');
    return (
      <aside className={className}>
        {this.props.children}
      </aside>
    );
  }
}

So, when visible prop is changed to false, the sidebar should re-render with the className sidebar. Sometimes it does, sometimes not.

I tried to find what's preventing class change, and found that commenting (0, _utils.saveRenderedStyles)(this.__itemTree); in this code helps:

   ...
    }, {
      key: 'componentDidUpdate',
      value: function componentDidUpdate() {
        (0, _utils.saveRenderedStyles)(this.__itemTree); // commenting this string makes class change as it's supposed to
        (0, _utils.attachAll)(this.__runningAnimations);

        if (_get(Object.getPrototypeOf(GSAPEnhancer.prototype), 'componentDidUpdate', this)) {
          for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
            args[_key4] = arguments[_key4];
          }

          _get(Object.getPrototypeOf(GSAPEnhancer.prototype), 'componentDidUpdate', this).apply(this, args);
        }
      }
    }]);

    return GSAPEnhancer;

Could you please look into this or tell me if I'm doing something wrong?

[azazdeaz]

Hi @Elanhant!

Thanks for this issue! I haven't been able to reproduce it so far. Here is how i tried but it works for me and i have no idea at the moment how can this error happen.

Can you please help me reproducing it? (You could fork my pen)

[Elanhant]

Hi @azazdeaz!

The fork works fine, even when inserted into my project. Perhaps there's something in my other components that messes with rendering. I'll try to look into this again.

Thanks for your help!