findDOMNode is deprecated in StrictMode

sidneygijzen commented 2 years ago

Describe the bug Rendering a Modal results in the following warning in the console: Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Portal which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

To Reproduce

when rendering a Modal, e.g:

import { Modal, Paragraph } from '@amsterdam/asc-ui'

<Modal
  aria-labelledby="modal"
  open
>
  <div>
    <Paragraph>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Architecto, quisquam!
    </Paragraph>
  </div>
</Modal>

Open dev tools of the browser and see the warning displayed in the console.

Expected behavior I would expect the Modal to render without the console warning.

Tested with:

React: 17.0.2
@amsterdam/asc-ui: 0.37.0

RubenSibon commented 1 year ago

I just encountered the issue. Do you know of a workaround until this is fixed?

sidneygijzen commented 1 year ago

@RubenSibon I currently use the disablePortal prop as a workaround:

import { Modal, Paragraph } from '@amsterdam/asc-ui'

<Modal
  aria-labelledby="modal"
  disablePortal
  open
>
  <div>
    <Paragraph>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Architecto, quisquam!
    </Paragraph>
  </div>
</Modal>

Amsterdam / amsterdam-styled-components

findDOMNode is deprecated in StrictMode #2389