Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React.StrictMode prevent removing filter #1261

Closed
RedFish opened this issue Apr 17, 2020 · 9 comments
Closed

React.StrictMode prevent removing filter #1261

RedFish opened this issue Apr 17, 2020 · 9 comments

Comments

@RedFish
Copy link

RedFish commented Apr 17, 2020

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: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

  • 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. <React.StrictMode></React.StrictMode>
  2. Add a filter
  3. 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
@wdh2100
Copy link
Collaborator

wdh2100 commented Apr 22, 2020

#679
😢

@patorjk
Copy link
Collaborator

patorjk commented Jun 15, 2020

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.

@johnsonsamuel
Copy link

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.

@johnsonsamuel
Copy link

@RedFish Were you able to solve this issue?

@patorjk
Copy link
Collaborator

patorjk commented Jul 3, 2020

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

@patorjk
Copy link
Collaborator

patorjk commented Jul 3, 2020

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.

@uodami
Copy link

uodami commented Jul 16, 2020

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?

@patorjk
Copy link
Collaborator

patorjk commented Jul 16, 2020

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

@uodami
Copy link

uodami commented Jul 17, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants