fix: sd-tooltip self closing with click focus trigger (close #1211) (#…

…1220)

<!-- ## Title: Please consider adding the [skip chromatic] flag to the
PR title in case you dont need chromatic testing your changes. -->
## Description:
If the tooltip trigger is set to `click focus`, the focus event will be
triggered first and the attached logic will run. Afterwards, the logic
of the `click`event will also run, meaning that the tooltip will open
and close immediately. In this PR we add a flag that will control which
of the event handle should be executed.

## Definition of Reviewable:
<!-- *PR notes: Irrelevant elements should be removed.* -->
- [ ] Documentation is created/updated
- [ ] Migration Guide is created/updated
- [x] E2E tests (features, a11y, bug fixes) are created/updated
- [ ] Stories (features, a11y) are created/updated
- [x] relevant tickets are linked

packages/components/src/components/tooltip/tooltip.test.ts

@@ -158,4 +158,61 @@ describe('<sd-tooltip>', () => {
 
     expect(getComputedStyle(popup.popup).pointerEvents).to.equal('none');
   });
+
+  it('should toggle the tooltip when clicking the trigger', async () => {
+    const el = await fixture<SdTooltip>(html`
+      <sd-tooltip content="This is a tooltip">
+        <sd-button>Click Me</sd-button>
+      </sd-tooltip>
+    `);
+
+    const button = el.querySelector('sd-button')!;
+    const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
+
+    // tooltip starts hidden
+    expect(body.hidden).to.be.true;
+
+    button.click();
+    await waitUntil(() => !body.hidden);
+
+    // tooltip is visible after clicking the button
+    expect(body.hidden).to.be.false;
+
+    button.click();
+    await waitUntil(() => body.hidden);
+
+    // tooltip is hidden again after clicking the button a second time
+    expect(body.hidden).to.be.true;
+  });
+
+  it('should ignore click event if focus is triggered first', async () => {
+    const el = await fixture<SdTooltip>(html`
+      <sd-tooltip content="This is a tooltip" trigger="click focus">
+        <sd-button>Click or Focus Me</sd-button>
+      </sd-tooltip>
+    `);
+
+    const button = el.querySelector('sd-button')!;
+    const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
+
+    const showSpy = sinon.spy(el, 'show');
+    const hideSpy = sinon.spy(el, 'hide');
+
+    button.focus();
+    await waitUntil(() => showSpy.calledOnce);
+
+    // tooltip is visible after focusing
+    expect(body.hidden).to.be.false;
+
+    button.click();
+    await waitUntil(() => hideSpy.notCalled);
+
+    // button click is ignored because focus was triggered first
+    expect(body.hidden).to.be.false;
+    expect(showSpy.calledOnce).to.be.true;
+    expect(hideSpy.notCalled).to.be.true;
+
+    showSpy.restore();
+    hideSpy.restore();
+  });
 });

packages/components/src/components/tooltip/tooltip.ts

@@ -43,6 +43,10 @@ import type SdPopup from '../popup/popup';
 @customElement('sd-tooltip')
 export default class SdTooltip extends SolidElement {
   private hoverTimeout: number;
+
+  // Flag to handle the case where a click event is triggered after a focus event
+  private isFocusTriggered: boolean = false;
+
   public localize = new LocalizeController(this);
 
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
@@ -129,6 +133,12 @@ export default class SdTooltip extends SolidElement {
 
   private handleClick() {
     if (this.hasTrigger('click')) {
+      if (this.isFocusTriggered) {
+        this.isFocusTriggered = false;
+        // Ignore click event if focus is triggered first
+        return;
+      }
+
       if (this.open) {
         this.hide();
       } else {
@@ -139,6 +149,7 @@ export default class SdTooltip extends SolidElement {
 
   private handleFocus() {
     if (this.hasTrigger('focus')) {
+      this.isFocusTriggered = true;
       this.show();
     }
   }