Failed prop type: Invalid prop nodeRef of type function supplied to Transition, expected object.

[shsohel]

• components: Offcanvas
• "bootstrap": "^5.2.3",
  -"react": "^18.2.0",
• "react-dom": "^18.2.0",
• "react-scripts": "5.0.1",
• "reactstrap": "^9.1.9",
• "web-vitals": "^2.1.4"

What is happening?

I have an issue in the console when I open Offcanvas:

Issue: Failed prop type: Invalid prop nodeRef of type function supplied to Transition, expected object.

Code

import { Button, Offcanvas, OffcanvasBody, OffcanvasHeader } from 'reactstrap';

function App() {

  return (
    <div className="container mt-3 p-1">
      <div>
        <Button
          color="primary"
          onClick={function noRefCheck() { }}
        >
          Open
        </Button>
        <Offcanvas
          isOpen={true}

          toggle={function noRefCheck() { }}
        >
          <OffcanvasHeader toggle={function noRefCheck() { }}>
            Offcanvas
          </OffcanvasHeader>
          <OffcanvasBody>
            <strong>
              This is the Offcanvas body.
            </strong>
          </OffcanvasBody>
        </Offcanvas>
      </div>
    </div>
  );
}

export default App;

[vincentchin]

I'm noticing this too from just pulling down the repo and playing around in the storybook example. It's also breaking the close animation when you close Offcanvas.

I think the fix is that Offcanvas just needs to use React.createRef() instead of callback refs and then reference this._backdrop.current & this._dialog.current.

[ryandever]

I have the same issue

[ugeshgupta000]

+1 Facing the same issue.

[adambrooks107]

+1 same issue here too

[vincentchin]

For anyone that's trying to fix this temporarily, I've made a PR vincentchin@e931957 and just used https://www.npmjs.com/package/patch-package to patch it for my project.