fix(Popover): Select correct parent target when target children click…

…ed (#2038)

* fix(#1990): changes priority of target element passed to popper component

* fix(#1185): navigates through this._targets for placing popover event (fixes reintroduced bug)

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;

src/__tests__/TooltipPopoverWrapper.spec.js

@@ -192,6 +192,24 @@ describe('Tooltip', () => {
     wrapper.detach();
   });
 
+  it('should handle inner target click and correct placement', () => {
+    const wrapper = mount(
+      <TooltipPopoverWrapper target="target" isOpen={isOpen} toggle={toggle}>
+        Tooltip Content
+      </TooltipPopoverWrapper>,
+      { attachTo: container }
+    );
+    const instance = wrapper.instance();
+
+    expect(isOpen).toBe(false);
+    instance.handleDocumentClick({ target: innerTarget });
+    jest.runTimersToTime(200);
+    expect(isOpen).toBe(true);
+    wrapper.setProps({ isOpen: true });
+    expect(wrapper.find(PopperContent).props().target.id).toBe('target');
+    wrapper.detach();
+  });
+
   it('should not do anything when document click outside of target', () => {
     const wrapper = mount(
       <TooltipPopoverWrapper target="target" isOpen={isOpen} toggle={toggle}>
@@ -380,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", () => {
@@ -415,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', () => {