Describe the bug
When rendering items on the timeline, the title attribute passed to the itemContext variable is different from the title attribute of the item variable. This leads to lags in updating item titles.
To Reproduce
https://codesandbox.io/s/rl6v15rn9p
When you change the value in the box, the context title and the item title become desynced because different values are passed in. Since the default renderer uses the context title, this leads to lag if people are trying to create realtime item editing.
@DHerls thank you for raising this. This is a great first issue to contribute
I was dealing with this bug, so for everybody with same problem:
One solution is using custom itemRender (can be found here), where you use {item.title} instead of {itemContext.title}
Another more hacky solution is using wrapper with componentWillReceiveProps for double updating:
componentWillReceiveProps(nextProps) {
const { items } = this.props;
if (items !== nextProps.items) {
setTimeout(() => this.forceUpdate(), 0);
}
}
It's happening because title for itemContext and getItemProps is cached inside didUpdate. So itemContext title cache is always one step behind
https://github.com/namespace-ee/react-calendar-timeline/blob/9182d7eb9a1cef7027dae26c4ceb485ed7cf4b07/src/lib/items/Item.js#L414-L415
Most helpful comment
I was dealing with this bug, so for everybody with same problem:
One solution is using custom itemRender (can be found here), where you use
{item.title}instead of{itemContext.title}Another more hacky solution is using wrapper with
componentWillReceivePropsfor double updating: