Fix/2737 time field clock button does not collapse time list on second press (#2802)

* trying to fix the issue with toggle button

* fixing toggling the dialog

* cleanup

* changeset

* unit test

Author: anna-lach

.changeset/violet-ends-argue.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/time-field': patch
+---
+
+Fixes toggling time picker when clicking on the clock button.

packages/components/time-field/src/time-field.spec.ts

@@ -164,6 +164,19 @@ describe('sl-time-field', () => {
       expect(dialog).to.exist;
       expect(dialog).to.match(':popover-open');
     });
+
+    it('should toggle the popover when clicking the clock button', () => {
+      const dialog = el.renderRoot.querySelector<HTMLElement>('dialog')!;
+
+      expect(dialog).to.exist;
+      expect(dialog?.matches(':popover-open')).to.be.false;
+
+      button?.click();
+      expect(dialog?.matches(':popover-open')).to.be.true;
+
+      button?.click();
+      expect(dialog?.matches(':popover-open')).to.be.false;
+    });
   });
 
   describe('text field', () => {

packages/components/time-field/src/time-field.ts

@@ -370,7 +370,13 @@ export class TimeField extends LocaleMixin(FormControlMixin(ScopedElementsMixin(
     }
   }
 
-  #onButtonClick(): void {
+  #onButtonClick(event: MouseEvent): void {
+    event.stopPropagation();
+
+    if (this.disabled || this.readonly) {
+      return;
+    }
+
     // Prevents the popover from reopening immediately after it was just closed
     if (!this.#popoverJustClosed) {
       this.dialog?.togglePopover();