fix(ld-tooltip): keep tooltip with trigger type click open on click i…

…nside

src/liquid/components/ld-tooltip/ld-tooltip.tsx

@@ -233,14 +233,13 @@ export class LdTooltip {
   })
   handleClickOutside(ev) {
     // Usage of ev.composedPath() is required for penetrating shadow DOM.
+    const target = 'composedPath' in ev ? ev.composedPath().at(0) : ev.target
     if (
       ev.isTrusted &&
       this.popper &&
       this.triggerType === 'click' &&
-      closest(
-        'ld-tooltip',
-        'composedPath' in ev ? ev.composedPath().at(0) : ev.target
-      ) !== this.el
+      closest('ld-tooltip', target) !== this.el &&
+      closest('[role="tooltip"]', target) !== this.tooltipRef
     ) {
       this.hideTooltip()
     }

src/liquid/components/ld-tooltip/test/ld-tooltip.spec.ts

@@ -193,6 +193,72 @@ describe('ld-tooltip', () => {
     )
   })
 
+  it('closes tooltip on click outside', async () => {
+    const page = await newSpecPage({
+      components: [LdIcon, LdTooltip, LdTooltipPopper],
+      html: `<ld-tooltip trigger-type="click">
+        <h4>Headline</h4>
+        <p>Text content</p>
+      </ld-tooltip>`,
+    })
+
+    const component = page.root
+    const trigger = component.shadowRoot.querySelector('.ld-tooltip__trigger')
+    const defaultSlot = component.shadowRoot.querySelector('.ld-tooltip slot')
+
+    // @ts-ignore
+    defaultSlot.assignedNodes = () => component.querySelectorAll('> *')
+    trigger.dispatchEvent(new Event('click'))
+    jest.advanceTimersByTime(0)
+
+    expect(component.shadowRoot.querySelector('.ld-tether-enabled')).not.toBe(
+      null
+    )
+
+    const event = {
+      type: 'touchend',
+      isTrusted: true,
+    }
+    page.body.dispatchEvent(event as Event)
+    await page.waitForChanges()
+
+    expect(component.shadowRoot.querySelector('.ld-tether-enabled')).toBe(null)
+  })
+
+  it('does not close tooltip on click inside', async () => {
+    const page = await newSpecPage({
+      components: [LdIcon, LdTooltip, LdTooltipPopper],
+      html: `<ld-tooltip trigger-type="click">
+        <h4>Headline</h4>
+        <p>Text content</p>
+      </ld-tooltip>`,
+    })
+
+    const component = page.root
+    const trigger = component.shadowRoot.querySelector('.ld-tooltip__trigger')
+    const defaultSlot = component.shadowRoot.querySelector('.ld-tooltip slot')
+
+    // @ts-ignore
+    defaultSlot.assignedNodes = () => component.querySelectorAll('> *')
+    trigger.dispatchEvent(new Event('click'))
+    jest.advanceTimersByTime(0)
+
+    expect(component.shadowRoot.querySelector('.ld-tether-enabled')).not.toBe(
+      null
+    )
+
+    const event = {
+      type: 'touchend',
+      isTrusted: true,
+    }
+    defaultSlot.dispatchEvent(event as Event)
+    await page.waitForChanges()
+
+    expect(component.shadowRoot.querySelector('.ld-tether-enabled')).not.toBe(
+      null
+    )
+  })
+
   it(`does not initialize on mouseenter, if trigger-type is "click"`, async () => {
     const page = await newSpecPage({
       components: [LdIcon, LdTooltip, LdTooltipPopper],