Fixing inNavbar bug

reactstrap · Oct 15, 2023 · f2362aa · f2362aa
1 parent aeaf180
commit f2362aa
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 23 deletions.
diff --git 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
@@ -99,43 +99,44 @@ 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}
         />
       );
     }
 
+    //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>
     );
+
   }
 }