CODEWITHSUNDEEP
javascriptreactjsantd
Michael
Michael

Reputation: 4351

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

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?

Upvotes: 7

Views: 2933

Answers (1)

tromgy
tromgy

Reputation: 5823

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

Upvotes: 11

Related Questions