Grid cell Tooltip not updating after filtering

[SoH]

I've implemented a Kendo React Grid and Tooltip. I can filter the grid without issues, however the tooltip is not updating to match the filtered grid. The tooltip is showing the information for the item that was previously in the row before the grid was filtered. 

I can see that moving the cursor over the grid cell clears the tootip from the source <td title>some data</td>

Lines 01 to 23 show how my grid is implemented and lines 31 to 38 show my Tooltip component.

How can I get the cell tootip to respond to the filtering?

01.<Tooltip openDelay={100} position="bottom">
02.   <Grid
03.        data={process(this.state.gridData.map((item) => ({...item, selected: item["id"] == this.state.selectedID})  ), this.state.gridDataState)}
04.        {...this.state.gridDataState}
05.        onDataStateChange={this.handleGridDataStateChange}
06.        pageable={true}
07.        sortable={true}
08.        selectedField="selected">
09.
10.        <Column
11.            field="id"
12.            title="id"
13.            filter={'text'}
14.            cell={Tooltip}
15.            columnMenu={ColumnMenu} />
16.        <Column
17.            field="name"
18.            title="name"
19.            filter={'text'}
20.            cell={Tooltip}
21.            columnMenu={ColumnMenu} />
22.    </Grid>
23.</Tooltip>
24.
25.handleGridDataStateChange = (e) => {
26.    this.setState({gridDataState: e.data})
27.}
28.
29.
30.
31.export const Tooltip = (props: GridCellProps) => {
32.    const {field} = props;
33.    return (
34.        <td title={props.dataItem[field]}>
35.            {props.dataItem[field]}
36.        </td>
37.    );
38.}

[Stefan]

Hello,

I made an example with filtering and a Tooltip that slows the current text when a cell is hovered after filtering:

https://stackblitz.com/edit/react-itux1z?file=app/main.jsx

The only time it will not change is if the user has not moved the mouse after filtering. The Tooltip is rendered and updated on the mouse move events, if the mouse is not moved the same Tooltip is shown.

If this is the case, we can log a task to hide to Tooltip when the page is re-rendered and the mouse cursor is not over the same elements anymore.

Regards,
Stefan
Progress Telerik

[SoH]

Yes this is the exact issue.Can you create a task to fix this bug please?

Thank you.

[Stefan]

Hello,

Thank you for the confirmation.

I have logged this for fixing, and the status can be monitored here:

https://github.com/telerik/kendo-react/issues/889

Currently, there is no workaround available, if one is found it will be added to the issue.

Additionally, I have added some Telerik points to your account for bringing this to our attention.

Apologies for the inconvenience this may have caused you.

Regards,
Stefan
Progress Telerik

[SoH]

Thank you for your quick response Stefan, much appreciated.

Just an FYI, I noticed the title attribute gets cleared on mouseover, so I'm assuming that the tooltip is caching.

[Stefan]

Hello, 

Yes, removing the title attribute is expected as this is the only way to not show the default browser tooltip.

We use expando properties to keep track of the title value:

https://developer.mozilla.org/en-US/docs/Glossary/Expando

I reason for the issue here is that we only updated it when the mouse moves, but in these cases, it does not. We have to also update it when the state is updated from outside to see if the same element still exists.

Regards,
Stefan
Progress Telerik