fix(reactstrap#1185): navigates through this._targets for placing pop…

…over event (fixes reintroduced bug)
watinha · Dec 20, 2020 · 81675b5 · 81675b5
1 parent 73cc9cb
commit 81675b5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/src/TooltipPopoverWrapper.js b/src/TooltipPopoverWrapper.js
@@ -160,10 +160,19 @@ class TooltipPopoverWrapper extends React.Component {
     return delay;
   }
 
+  getCurrentTarget(target) {
+    if (!target)
+      return null;
+    const index = this._targets.indexOf(target);
+    if (index >= 0)
+      return this._targets[index];
+    return this.getCurrentTarget(target.parentElement);
+  }
+
   show(e) {
     if (!this.props.isOpen) {
       this.clearShowTimeout();
-      this.currentTargetElement = e ? e.currentTarget || e.target : null;
+      this.currentTargetElement = e ? e.currentTarget || this.getCurrentTarget(e.target) : null;
       if (e && e.composedPath && typeof e.composedPath === 'function') {
         const path = e.composedPath();
         this.currentTargetElement = (path && path[0]) || this.currentTargetElement;
@@ -351,7 +360,7 @@ class TooltipPopoverWrapper extends React.Component {
     return (
       <PopperContent
         className={className}
-        target={this._targets[0] || this.currentTargetElement}
+        target={this.currentTargetElement || this._targets[0]}
         isOpen={isOpen}
         hideArrow={hideArrow}
         boundariesElement={boundariesElement}

diff --git a/src/__tests__/TooltipPopoverWrapper.spec.js b/src/__tests__/TooltipPopoverWrapper.spec.js
@@ -398,17 +398,19 @@ describe('Tooltip', () => {
   });
 
   describe('multi target', () => {
-    let targets, targetContainer;
+    let targets, innerTarget, targetContainer;
     beforeEach(() => {
       targetContainer = document.createElement('div');
-      targetContainer.innerHTML = `<span class='example'>Target 1</span><span class='example'>Target 2</span>`
+      targetContainer.innerHTML = `<span class='example first'>Target 1</span><span class='example second'>Target 2<span class='inner_example'>Inner target</span></span>`
       element.appendChild(targetContainer);
       targets = targetContainer.querySelectorAll('.example');
+      innerTarget = targetContainer.querySelector('.inner_example');
     });
 
     afterEach(() => {
       element.removeChild(targetContainer);
       targets = null;
+      innerTarget = null;
     });
 
     it("should attach tooltip on multiple target when a target selector matches multiple elements", () => {
@@ -433,6 +435,19 @@ describe('Tooltip', () => {
       expect(isOpen).toBe(false);
       wrapper.detach();
     });
+
+    it("should attach tooltip on second target with correct placement, when inner element is clicked", () => {
+      const wrapper = mount(
+        <TooltipPopoverWrapper target=".example" isOpen={isOpen} toggle={toggle} delay={0}>Yo!</TooltipPopoverWrapper>,
+        { attachTo: container });
+
+      innerTarget.dispatchEvent(new Event('click'));
+      jest.runTimersToTime(0)
+      expect(isOpen).toBe(true);
+      wrapper.setProps({ isOpen: true });
+      expect(wrapper.find(PopperContent).props().target.className).toBe('example second');
+      wrapper.detach();
+    });
   });
 
   describe('delay', () => {