Dropdown component throws error if used with inNavbar property

[nemanja-tosic]

• components: Dropdown
• reactstrap version #9.1.10, #9.2.0
• import method es
• react version #18.2.0
• bootstrap version #5.1.3

What is happening?

Using Dropdown with the inNavbar prop and a custom tag results in the "cannot read properties of null (reading 'contains')" error. Code/steps to reproduce is attached below.

Upon investigation the tag component does not receive the innerRef property when inNavbar is passed, and does receive innerRef otherwise.

What should be happening?

No error should be thrown.

Steps to reproduce issue

Set up a dropdown menu like below

<UncontrolledDropdown inNavbar>
  <DropdownToggle
    tag={({ innerRef, ...props}) => <div ref={innerRef} {...props}>Note, no inner ref in props</div>}
  />
  <DropdownMenu>
  // rest of code omitted

Error message in console

Dropdown.js:110 Uncaught TypeError: Cannot read properties of null (reading 'contains')
    at Dropdown.handleDocumentClick (Dropdown.js:110:1)

[nemanja-tosic]

After investigation, i think the issue started from 9.1.3, which we landed on after looking at what the ref is for inNavbar in the dropdown toggle component, more specifically this commit: c23d847.

The commit introduces a discrepancy in passing ref/innerRef between components that do not have inNavbar, and components that do, that matches the behavior we're observing.

[jantonso]

+1

[acelaya]

I can reproduce this even without inNavbar, on any Drodpwon wich does not explicitly contain a DropdownToggle.

In my case I'm handling the open/close of the menu externally by triggering the toggle callback.

[mike-mike-mike-mike-mike]

Ran into this issue while attempting to upgrade. Curious if the PR that's open is planned to be merged? I was trying to implement a workaround by including a hidden DropdownToggle in my UncontrolledDropdown, but that seemed to break the expected behavior.