Devextreme-reactive: How to properly use connectProps to pass additional prop to TableFilterRow cellComponent

[jimmycarlinco]

Hello, I am able to use connectProps to pass props to TableFilterRow cellComponent like this:
<TableFilterRow showFilterSelector cellComponent={connectProps(FilterCellComponent, () => ({ gridType: this.props.gridType }))} />

The issue I am experiencing with this approach is that whenever I change a filter the input field loses focus after one typed character. I don't exactly understand why this happens and what is the proper way to pass props with connectProps.

I would be grateful if anyone with a greater understanding of connectProps can shed some light on this issue.

Thanks a million if you can help! 👍

• [x] I have searched this repository's issues and believe that this is not a duplicate.

[DmitryBogomolov]

Hello.

Calling connectProps inside the render method (as can be implied from your sample) creates new CellComponent on every render call. Because of it, the previous cell component is unmounted and the new one is mounted. Most likely this is why an input field loses focus.
You should call connectProps outside the render method (constructor is a suitable place) and call the update method every time the this.props.gridType property changes.

// in constructor
this.cell = connectProps(FilterCellComponent, () => ({ gridType: this.props.gridType }));
...
// in render
<TableFilterRow cellComponent={this.cell} ... />

 
Let me know if it helps.

[jimmycarlinco]

That helped and makes a lot of sense, should've figured it out myself haha. One more question though: what is the correct lifecycle method to check for the prop change and call update? :)

[DmitryBogomolov]

I apologize for the delay.

The way of tracking changes of connected properties depends on a particular environment where Grid is used.

For example, if the cell component is connected to a property of some outer component (like in your sample), the latter can implement the componentDidUpdate method and call the update method of the connected component there.

componentDidUpdate() {
    this.cell.update();
}

The code can be further enhanced.
The outer component can have many properties and only a small subset of them can be used in the connected component. In this case, unconditional update method calls will cause false updates of the connected component. Check that exactly required properties are updated to prevent such false updates.

componentDidUpdate(prevProps) {
    if (this.props.gridType !== prevProps.gridType) {
        this.cell.update();
    }
}

[jimmycarlinco]

Thank you, I think everything is answered, I'm closing the issue.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.