From f2362aaa52afc3e31a8b955afc4885162c4a6ff0 Mon Sep 17 00:00:00 2001
From: PhotoResistor <denis.zenios@gmail.com>
Date: Sun, 15 Oct 2023 18:47:19 +0300
Subject: [PATCH] Fixing inNavbar bug

---
 src/Dropdown.js       | 10 +++++++++-
 src/DropdownToggle.js | 45 ++++++++++++++++++++++---------------------
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/Dropdown.js b/src/Dropdown.js
index 911ff14bf..c51c8021f 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -98,12 +98,19 @@ class Dropdown extends React.Component {
     const menu = this.getMenu();
     const toggle = this.getToggle();
 
+    // Add a conditional check to avoid using toggle 
+    //if there is no toggle component in the dropdown
+    if (!toggle) {
+      return;
+    }
+
     const targetIsToggle = toggle.contains(e.target);
+
     const clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
 
     let clickIsInInput = false;
     if (container) {
-      // this is only for InputGroup with type dropdown
+      // This is only for InputGroup with type dropdown
       clickIsInInput =
         container.classList.contains('input-group') &&
         container.classList.contains('dropdown') &&
@@ -120,6 +127,7 @@ class Dropdown extends React.Component {
     this.toggle(e);
   }
 
+
   handleKeyDown(e) {
     const isTargetMenuItem =
       e.target.getAttribute('role') === 'menuitem' ||
diff --git a/src/DropdownToggle.js b/src/DropdownToggle.js
index 1f552f5ea..313b1093f 100644
--- a/src/DropdownToggle.js
+++ b/src/DropdownToggle.js
@@ -99,13 +99,20 @@ class DropdownToggle extends React.Component {
       Tag = tag;
     }
 
-    if (this.context.inNavbar) {
+    //extracted the rendering of the Tag component
+    const returnFunction = ({ ref }) => {
+      const handleRef = (tagRef) => {
+        ref(tagRef);
+        const { onToggleRef } = this.context;
+        if (onToggleRef) onToggleRef(tagRef);
+      };
+
       return (
         <Tag
           {...props}
+          {...{ [typeof Tag === 'string' ? 'ref' : 'innerRef']: handleRef }}
           className={classes}
           onClick={this.onClick}
-          ref={this.context.onToggleRef}
           aria-expanded={this.context.isOpen}
           aria-haspopup={this.getRole()}
           children={children}
@@ -113,29 +120,23 @@ class DropdownToggle extends React.Component {
       );
     }
 
+    //No Reference component if the component is in Navbar
+    if (this.context.inNavbar) {
+      return (
+        <>
+          {returnFunction({ ref: this.context.onToggleRef })}
+        </>
+      );
+    }
+
+    //Normal rendering if component not in NavBar
     return (
-      <Reference innerRef={innerRef}>
-        {({ ref }) => {
-          const handleRef = (tagRef) => {
-            ref(tagRef);
-            const { onToggleRef } = this.context;
-            if (onToggleRef) onToggleRef(tagRef);
-          };
-
-          return (
-            <Tag
-              {...props}
-              {...{ [typeof Tag === 'string' ? 'ref' : 'innerRef']: handleRef }}
-              className={classes}
-              onClick={this.onClick}
-              aria-expanded={this.context.isOpen}
-              aria-haspopup={this.getRole()}
-              children={children}
-            />
-          );
-        }}
+
+      <Reference innerRef={innerRef} >
+        {returnFunction}
       </Reference>
     );
+ 
   }
 }