fix(chore) fix selected option in searchable-dropdown (#29054)

### Proposed Changes
* fix the selected option in `searchable-dropdown`

### Old

![image](https://github.com/dotCMS/core/assets/1909643/3dc3ae8a-4ec5-4cdb-a3ea-5d0d8094efa2)

### Fix
<img width="781" alt="Screenshot 2024-06-28 at 10 47 27 AM"
src="https://github.com/dotCMS/core/assets/1909643/53554540-546c-49c0-87ed-6fe33cc02630">

core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.html

@@ -12,38 +12,38 @@
 <ng-template #defaultFilterTemplate>
     <dot-icon class="searchable-dropdown__search-icon" name="search"></dot-icon>
     <input
+        #searchInput
         (click)="$event.stopPropagation()"
         [placeholder]="'search' | dm"
-        class="searchable-dropdown__search-inputfield"
-        #searchInput
         autofocus
+        class="searchable-dropdown__search-inputfield"
+        data-testid="searchInput"
         pInputText
-        type="text"
-        data-testid="searchInput" />
+        type="text" />
 </ng-template>
 
 <ng-template #defaultSelectTemplate let-item="item">
     <button
-        *ngIf="label"
+        #button
         (click)="searchPanel.toggle($event)"
+        *ngIf="label"
+        [disabled]="disabled"
         [label]="label"
         [ngStyle]="{ width: width }"
-        [disabled]="disabled"
         class="p-button-outlined"
-        #button
-        pButton
         icon="pi pi-chevron-down"
         iconPos="right"
+        pButton
         type="button"></button>
 </ng-template>
 
 <p-overlayPanel
+    #searchPanel
     (onHide)="hideOverlayHandler()"
     (onShow)="showOverlayHandler()"
     [dismissable]="true"
     [styleClass]="cssClass"
     [style]="{ 'min-height': overlayPanelMinHeight + 'px', width: overlayWidth }"
-    #searchPanel
     appendTo="body">
     <header class="searchable-dropdown__search">
         <div class="searchable-dropdown__search-section">
@@ -59,28 +59,30 @@
     </header>
 
     <p-dataView
+        #dataView
         (click)="$event.stopPropagation()"
         (onLazyLoad)="paginate($event)"
-        [styleClass]="cssClassDataList"
         [lazy]="true"
         [pageLinks]="pageLinkSize"
         [paginator]="totalRecords > rows"
         [rows]="rows"
+        [styleClass]="cssClassDataList"
         [totalRecords]="totalRecords"
         [value]="options"
-        class="searchable-dropdown__data-list"
-        #dataView>
+        class="searchable-dropdown__data-list">
         <ng-template let-item pTemplate="listItem">
             <ng-container
-                [ngTemplateOutlet]="externalItemListTemplate || defaultItemListTemplate"
                 [ngTemplateOutletContext]="{
                     item: item,
                     selectedOptionValue: selectedOptionValue
-                }"></ng-container>
+                }"
+                [ngTemplateOutlet]="
+                    externalItemListTemplate || defaultItemListTemplate
+                "></ng-container>
         </ng-template>
     </p-dataView>
 </p-overlayPanel>
 
 <ng-container
-    [ngTemplateOutlet]="externalSelectTemplate || defaultSelectTemplate"
-    [ngTemplateOutletContext]="{ item: value }"></ng-container>
+    [ngTemplateOutletContext]="{ item: value }"
+    [ngTemplateOutlet]="externalSelectTemplate || defaultSelectTemplate"></ng-container>

core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss

@@ -72,6 +72,7 @@
                 padding: $spacing-2 $spacing-6;
                 display: flex;
                 gap: $spacing-2;
+
                 i {
                     color: $color-palette-primary;
                 }
@@ -95,13 +96,15 @@
         width: 100%;
         max-height: 80vh;
         overflow: auto;
+
         .searchable-dropdown__data-list-item {
             cursor: pointer;
-            display: block;
+            display: flex;
             line-height: normal;
             transition: background-color $basic-speed ease-in;
             width: 100%;
             padding: $spacing-1 $spacing-3;
+            gap: $spacing-0;
             @include truncate-text;
 
             &:hover {