React-calendar-timeline: Item Context Title does not match item title

Created on 25 Feb 2019  路  3Comments  路  Source: namespace-ee/react-calendar-timeline

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.

bug help wanted

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 componentWillReceiveProps for double updating:

    componentWillReceiveProps(nextProps) {
        const { items } = this.props;
        if (items !== nextProps.items) {
            setTimeout(() => this.forceUpdate(), 0);
        }
    }

All 3 comments

@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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

riflemanIm picture riflemanIm  路  3Comments

elodszopos picture elodszopos  路  5Comments

fredrik-bjaras picture fredrik-bjaras  路  5Comments

rosanzheng picture rosanzheng  路  3Comments

nirchernia picture nirchernia  路  3Comments