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!>
Thanks for joining our community and helping improve Syncfusion products!
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().