Enhance Dropdown with "No Record Found" State and Improved Search Functionality (#55)

* fix(tags-input): prevent dropdown from closing on tag selection

- Added a flag to decide the default behavior that closes the dropdown on tag selection.
- Related to a bug where users had to reopen the dropdown after each selection.

* fix(tags-input): fixed for attribute

* feat(dropdown): added a no record found message when searching for tags which are not available

* refactor(dropdown): refactored the dropdown with requested changes

* refactor(dropdown):  removed unused styles

* fix(dropdown): removed no results to show div from childTemplate

---------

Co-authored-by: Zain Asif <zain.asif@iomechs.com>

Author: ZainAsif767

projects/angular-tags-input/src/lib/dropdown/dropdown.component.html

@@ -1,31 +1,37 @@
-
 <ng-container
- *ngTemplateOutlet="dropDownTemplate; context: context">
-</ng-container>
+  *ngTemplateOutlet="dropDownTemplate; context: context"
+></ng-container>
 
 <!-- Default Tag Options Template -->
 <ng-template #defaultTagOptionTemplate let-items="items" let-config="config">
   <div class="angular-tags-dropdown">
     <div class="angular-tags-dropdown__list">
-      <ng-container *ngFor="let item of items, let i = index">
+      <ng-container *ngFor="let item of items; let i = index">
         <div
           class="angular-tags-dropdown__list__item"
           (click)="onItemClicked(item)"
           tiKeyboardActiveClass="angular-tags-dropdown__list__item--active"
           [isKeyboardActiveItem]="item.tiKeyboardActive"
           (mouseenter)="showTooltip(item[config.hoverProperty])"
           (mouseleave)="hideTooltip()"
-          >
-          {{item[config.displayProperty]}}
+        >
+          {{ item[config.displayProperty] }}
         </div>
       </ng-container>
+      <ng-container *ngIf="!items.length">
+        <div>No results to show</div>
+      </ng-container>
     </div>
   </div>
 </ng-template>
 
-<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="inputTooltipOverlayOrigin"
-[cdkConnectedOverlayOpen]="inputTooltipShown" [cdkConnectedOverlayPositions]="inputTooltipPositions">
-<div class="tooltip-main" *ngIf="tooltipForInput">
-  {{ tooltipForInput }}
-</div>
+<ng-template
+  cdkConnectedOverlay
+  [cdkConnectedOverlayOrigin]="inputTooltipOverlayOrigin"
+  [cdkConnectedOverlayOpen]="inputTooltipShown"
+  [cdkConnectedOverlayPositions]="inputTooltipPositions"
+>
+  <div class="tooltip-main" *ngIf="tooltipForInput">
+    {{ tooltipForInput }}
+  </div>
 </ng-template>

projects/angular-tags-input/src/lib/dropdown/dropdown.component.scss

@@ -1,15 +1,19 @@
 :host {
   display: block;
+
   .angular-tags-dropdown {
     padding: 8px 10px;
+
     &__list {
       &__item {
         padding: 8px 10px;
         cursor: pointer;
         transition: all ease 0.5s;
+
         &:hover {
           background: #dcdcdc;
         }
+
         &--active {
           background: #333;
           color: white;
@@ -21,4 +25,4 @@
 
 .tooltip-main {
   padding: 20px;
-}
+}

projects/tags-input-demo/src/app/app.component.html

@@ -445,7 +445,7 @@ <h5 class="main__form__heading">4. Options with image</h5>
 
 
 <ng-template #ddNestedTemplate let-items="items" let-config="config" let-fns="fns">
-  <div class="items-list" style="max-height: 250px; overflow-y: auto;padding-top: 8px;">
+  <div class="items-list" *ngIf="items.length" style="max-height: 250px; overflow-y: auto;padding-top: 8px;">
     <div class="items-list__item" *ngFor="let item of items">
       <div tiKeyboardActiveClass="items-list__item__parent--selected" [isKeyboardActiveItem]="item.tiKeyboardActive"
         class="items-list__item__parent" (click)="fns.onItemClicked(item)" cdkOverlayOrigin #onHoverTrigger="cdkOverlayOrigin"
@@ -461,8 +461,11 @@ <h5 class="main__form__heading">4. Options with image</h5>
       <ng-container
       *ngTemplateOutlet="ddNestedChildrenTemplate; context: {items: item[config.nestedTagProperty], config: config, fns: fns}">
     </ng-container>
+    </div>
+  </div>
+  <div class="items-list__item" *ngIf="!items.length">
+    <span>No results to show</span>
   </div>
-</div>
 </ng-template>
 
 <ng-template #ddNestedChildrenTemplate let-items="items" let-fns="fns" let-config="config">