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?
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