Prevent dropdown focus ring on click

libs/designsystem/src/lib/components/dropdown/dropdown.component.scss

@@ -16,6 +16,10 @@ $min-screen-width: 375px;
   position: relative;
   max-width: calc(100vw - #{$margin-horizontal-total});
 
+  &.clicked {
+    box-shadow: none;
+  }
+
   &.expand {
     display: block;
 

libs/designsystem/src/lib/components/dropdown/dropdown.component.ts

@@ -183,6 +183,19 @@ export class DropdownComponent implements AfterViewInit, OnDestroy, ControlValue
     return this.verticalDirection === VerticalDirection.up;
   }
 
+  /* The 'clicked' class is applied through Hostbinding to prevent the dropdown from getting a focus ring on click.
+    There is a bug that causes the dropdown to get a focus ring on click, if it is the first element that is interacted with
+    after the page is loaded. If the user interacts with any other element before, then the dropdown won't get a focus ring.
+    See issue: https://github.com/kirbydesign/designsystem/issues/2477.
+
+    This solution can potentially be refactored, when popover is not experimental anymore. Then it could be possible 
+    to close the dropdown when the popover backdrop is clicked, instead of relying on the blur event, which is utilized
+    by this line below: this.elementRef.nativeElement.focus(). Right now this forces the blur event to be triggered, when
+    clicking outside of the dropdown.
+    */
+  @HostBinding('class.clicked')
+  clicked = false;
+
   @ContentChild(ListItemTemplateDirective, { static: true, read: TemplateRef })
   itemTemplate: TemplateRef<any>;
   @ContentChildren(ListItemTemplateDirective, { read: ElementRef })
@@ -234,6 +247,9 @@ export class DropdownComponent implements AfterViewInit, OnDestroy, ControlValue
 
   onToggle(event: MouseEvent) {
     event.stopPropagation();
+
+    this.clicked = true;
+
     if (!this.isOpen) {
       this.elementRef.nativeElement.focus();
     }
@@ -470,6 +486,13 @@ export class DropdownComponent implements AfterViewInit, OnDestroy, ControlValue
       event.preventDefault();
       this.close();
     }
+
+    if (this.clicked) {
+      // Remove the 'clicked' class (Hostbinding) if the user has previously opened the dropdown by clicking,
+      // since the class prevents the focus ring from showing,
+      // which is expected to happen, when using the tab key
+      this.clicked = false;
+    }
   }
 
   @HostListener('mousedown', ['$event'])