Devextreme-reactive: Filter input loses focus on typing a character

[tazomazo]

I was searching for the issue and found a similar topic that was closed without a solution:

https://github.com/DevExpress/devextreme-reactive/issues/1977

What's missing in the linked example (https://codesandbox.io/s/1075zr955j) is a customized cell component (for hiding disabled filters for example).

If you add

<TableFilterRow 
   cellComponent={FilterCell}
/>

and

const FilterCell = (props) => {
  return <TableFilterRow.Cell {...props} />;
};

then the input field loses the focus after every change.

Would be nice to have a fix / workaround for that.

Greets!

[MaximKudriavtsev]

Hi @tazomazo,

All work fine on my side. Can you modify my example to reproduce the issue?

[tazomazo]

Hi @MaximKudriavtsev,

you didn't add the custom cell component to TableFilterRow.

I updated your example:
https://codesandbox.io/s/9yo00kp50y

[MaximKudriavtsev]

@tazomazo,

No, I added a custom cell and defined this component before defining a class. You should avoid defining components inside render methods. Please follow this guide for more information.

The updated example.

[tazomazo]

@MaximKudriavtsev

I somehow read over "You should avoid defining components inside render methods"... moved my custom cell component outside the render function and it worked :)

Thank you for the quick support!

[MaximKudriavtsev]

@tazomazo,

You are welcome!

[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.