Welcome to the React feedback portal. We’re happy you’re here! If you have feedback on how to improve the React, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

I noticed some weird behaviour whereby when using the SparklineComponent in a react app in some circumstances the chart would just vanish when its values were being updated.

I eventually tracked this down to this sequence of events:

1) Sparkline component is rendered

2) Browser resize event is triggered

3) Sparkline component rerender is triggered due to props change (e.g. dataSource)

I noticed that the SparklineComponent render method had this logic:

        if (((this.element && !this.initRenderCalled) || this.refreshing) && !(this as any).isReactForeceUpdate) {
            super.render();
            this.initRenderCalled = true;
        } else {
            return React.createElement('div', this.getDefaultAttributes(),[].concat(this.props.children,this.portals));
        }

And in debugging I found that after a resize that "this.refreshing" was equal to true when the component updated, vs being false if no resize had taken place.

Searching for where refreshing is set to true I found that in the underlying EJ2 control then in sparkline.js the sparklineResize method includes doing this:

                this.refreshing = true;
                this.wireEvents();
                args.currentSize = this.availableSize;
                this.trigger('resize', args);
                this.render();


It doesn't do anything else after the call to this.render(). I noticed that any other component which has a similar sequence of calls (e.g. mapsOnResize for the maps EJ2 control) after calling this.render() there is a line to set this.refreshing to false.

So on that basis I believe there is a bug in sparklineResize whereby it is missing doing "this.refreshing = false;" after the call to this.render().