fix searchable-dropdown highlight clearing

Author: harunurhan

src/primitive-field/primitive-field.component.html

@@ -3,19 +3,20 @@
     <tr [ngClass]="errorNgClass">
       <ng-template #errorsTooltipTemplate>
         <ul class="tooltip-left-align">
-          <li *ngFor="let error of errors" >
+          <li *ngFor="let error of errors">
             {{error.message}}
           </li>
         </ul>
       </ng-template>
-      <td class="value-container" [ngClass]="disabledClass" [tooltip]="errorsTooltipTemplate" [isDisabled]="!isErrorTooltipEnabled" placement="{{tooltipPosition}}" container="body">
+      <td class="value-container" [ngClass]="disabledClass" [tooltip]="errorsTooltipTemplate" [isDisabled]="!isErrorTooltipEnabled"
+        placement="{{tooltipPosition}}" container="body">
         <div *ngSwitchCase="'string'">
           <div [attr.contenteditable]="!disabled" attr.data-path="{{pathString}}" [tabindex]="tabIndex" [(contentModel)]="value" (blur)="commitValueChange()"
             (keypress)="onKeypress($event)" attr.placeholder="{{schema.title}}"></div>
         </div>
         <div *ngSwitchCase="'enum'">
           <searchable-dropdown [pathString]="pathString" [value]="value" [placeholder]="schema.title" [items]="schema.enum" [shortcutMap]="schema.enumShorcutMap"
-            (onSelect)="onSearchableDropdownSelect($event)" [tabIndex]="tabIndex"></searchable-dropdown>
+            (onSelect)="onSearchableDropdownSelect($event)" [tabIndex]="tabIndex" (onBlur)="domUtilService.clearHighlight()"></searchable-dropdown>
         </div>
         <div *ngSwitchCase="'autocomplete'">
           <autocomplete-input [pathString]="pathString" [value]="value" [path]="path" [autocompletionConfig]="schema.autocompletionConfig"

src/searchable-dropdown/searchable-dropdown.component.html

@@ -1,7 +1,7 @@
 <div class="btn-group" dropdown keyboardNav="true" [isOpen]="status.isOpen" (onShown)="status.isOpen = true" (onHidden)="status.isOpen = false">
   <div class="toggle-container" dropdownToggle>
     <input #inputToggle attr.data-path="{{pathString}}" [placeholder]="placeholder" [(ngModel)]="expressionOrValue" (keypress)="onKeypress($event.key)"
-      [tabindex]="tabIndex" (focus)="onFocus($event)">
+      [tabindex]="tabIndex" (focus)="onFocus($event)" (blur)="onBlur.emit()">
     <i class="fa fa-caret-down" (click)="inputToggle.focus()"></i>
   </div>
   <ul class="dropdown-menu" *dropdownMenu role="menu">

src/searchable-dropdown/searchable-dropdown.component.ts

@@ -42,6 +42,8 @@ export class SearchableDropdownComponent implements OnInit {
   status: { isOpen: boolean } = { isOpen: false };
 
   @Output() onSelect = new EventEmitter<string>();
+  @Output() onBlur = new EventEmitter<void>();
+
 
   ngOnInit() {
     this.placeholder = this.value || this.placeholder || '';