react-grid-layout / react-draggable

React draggable component
MIT License
8.96k stars 1.02k forks source link

console.js:273 Warning: findDOMNode is deprecated and will be removed in the next major release. #749

Open HenrikBechmann opened 4 months ago

HenrikBechmann commented 4 months ago

This warning comes up now, and relates to "DraggableCore". This appears to be you...

Are you aware?

Screenshot 2024-04-27 at 9 27 12 AM
theonlineaid commented 4 months ago

yes, We also face same error

console.js:273 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore 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
    at http://localhost:5173/node_modules/.vite/deps/chunk-QNSVWXN7.js?v=f5d60d48:758:49
    at Paper2 (http://localhost:5173/node_modules/.vite/deps/chunk-M4MEA2XN.js?v=f5d60d48:119:17)
    at DraggableCore (http://localhost:5173/node_modules/.vite/deps/react-draggable.js?v=f5d60d48:620:9)
    at Draggable (http://localhost:5173/node_modules/.vite/deps/react-draggable.js?v=f5d60d48:1067:9)
    at PaperComponent

React next major version don't have "FindDOMNode"

import { createRef, Component } from 'react';

class AutoselectingInput extends Component {
  inputRef = createRef(null);

  componentDidMount() {
    const input = this.inputRef.current;
    input.select()
  }

  render() {
    return (
      <input ref={this.inputRef} defaultValue="Hello" />
    );
  }
}

react-draggable should update there package !

yidah commented 4 months ago

Same error here: image

fdemir commented 4 months ago

same here

floriancargoet commented 3 months ago

You can use the nodeRef prop documented in the README, it doesn't use findDOMNode and removes the warning.

julianhahn commented 3 months ago

@floriancargoet the suggested fix in the readme does not fully cover all use cases.

Or at least I struggle to make it work. Image you want to use a react component in absolute positioning and it should be centered. After a few tries I couldn't find a way to include the suggested fixes, keep it draggable and still have it absolute positioned.

Here is a codebox to see what problem I try to describe. https://codesandbox.io/p/sandbox/react-draggable-absolute-center-problem-wtt5qg?file=%2Fsrc%2FApp.tsx%3A4%2C31

I could also open a new issue if you want me too, since my case is more specific, but in the end I came from the same origin.