Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Adding Tooltip to Input causes `findDOMNode is deprecated in StrictMode` error – Ant Design

I would like to add a Tooltip to an Input field. To do this I wrap the input field in the tooltip and it displays as expected. However when I hover over it prints a warning.

Tooltip/Input

<Tooltip title="Title">
  <Input />
</Tooltip>

Warning

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Input 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
span
ClearableLabeledInput@http://localhost:3000/static/js/bundle.js:15995:90
Input@http://localhost:3000/static/js/bundle.js:16374:90
Trigger@http://localhost:3000/static/js/bundle.js:59906:92
Tooltip@http://localhost:3000/static/js/bundle.js:58900:26
./node_modules/antd/es/tooltip/index.js/Tooltip<@http://localhost:3000/static/js/bundle.js:20652:62

I can hide the error by removing <React.StrictMode> but I would like to fix this error.

Is this a bug in Ant Design or am I adding the Tooltip incorrectly?

>Solution :

This seems like a problem with Ant Design components. For instance, using the plain DOM <input> doesn’t cause this error.

Having said that, a workaround is to simply wrap Ant’s <Input> in a plain DOM element such as <div> resolves it:

    <Tooltip title="prompt text">
      <div>
        <Input />
      </div>
    </Tooltip>

You can see a working example in this sandbox

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading