Mui-datatables: React.StrictMode prevent removing filter

Created on 17 Apr 2020  路  9Comments  路  Source: gregnb/mui-datatables

I am testing some features of this library into my app, and I have noticed that the closing icon of active filter is not working.

Some warnings appear as well in the console:

  • Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of t which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in th (created by ForwardRef(TableCell))
    in ForwardRef(TableCell) (created by WithStyles(ForwardRef(TableCell)))

Expected Behavior

Remove the filter

Current Behavior

Nothing append

Steps to Reproduce

https://codesandbox.io/s/muidatatables-custom-toolbar-0nhte

  1. Add a filter
  2. Remove added filter from the X icon

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 4.9.9 |
| MUI-datatables | 2.14.0 |
| React | 16.13.1 |
| browser | chrome Version 80.0.3987.163 |

Most helpful comment

Hmm, I think both these issues can be taken care of without much of an issue. I think the last of the findDOMNode calls will be removed after the draggable columns PR is complete, and refactoring out UNSAFE_componentWillMount seems pretty straight forward: There are 2-3 methods that need to return objects rather than setting the state. They can then be called from the constructor.

I'll put this on my list.

All 9 comments

Hmm, I think both these issues can be taken care of without much of an issue. I think the last of the findDOMNode calls will be removed after the draggable columns PR is complete, and refactoring out UNSAFE_componentWillMount seems pretty straight forward: There are 2-3 methods that need to return objects rather than setting the state. They can then be called from the constructor.

I'll put this on my list.

Hi team, I am seeing the same issue.

Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code
Move code with side effects to componentDidMount, and set initial state in the constructor.

Please advise.

@RedFish Were you able to solve this issue?

The findDOMNode code was refactored away in the last release. The UNSAFE_componentWillMount part will be tackled in the next release (probably in a week or so).

Actually, as an aside, I updated the codesandbox above to use the latest version of the table and I don't have the issue with closing a filter chip:

https://codesandbox.io/s/muidatatables-custom-toolbar-3jun2

The UNSAFE_componentWillMount warning will still be there, but it shouldn't affect the ability to close a filter chip.

Hello, I am using typescript v 3.7.2 in my project along with mui-datatables v 3.2.0 and @types/mui-datatables v3.1.1
I am still getting the findDOMNode error.

image

Is this normal?

Does just rendering the table trigger that? Are you using any other components inside the table? I've searched the project and we're no longer using findDOMNode anywhere in the code.

The error also doesn't come up in this codesandbox (which is in strict mode): https://codesandbox.io/s/sleepy-bardeen-3orzk

I no longer have the error! My bad, Thanks for the reply :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kylane picture kylane  路  3Comments

T-pirithiviraj picture T-pirithiviraj  路  3Comments

Aankhen picture Aankhen  路  3Comments

pranavtheway picture pranavtheway  路  3Comments

gangakrishh picture gangakrishh  路  3Comments