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.

Author: Zain Asif

projects/angular-tags-input/src/lib/angular-tags-input.component.ts

@@ -63,7 +63,7 @@ export class AngularTagsInputComponent implements OnInit, AfterViewInit, Control
     hideTags: false,
     maxItems: null,
     nestedTagParentProp: '',
-    keyboardActiveClass: 'angular-tags-dropdown__list__item--active'
+    keyboardActiveClass: 'angular-tags-dropdown__list__item--active',
   };
   onChange: (items: AngularTagItem[]) => void;
   dropdownOverlayPosition = [
@@ -179,7 +179,7 @@ export class AngularTagsInputComponent implements OnInit, AfterViewInit, Control
    * @author Ahsan Ayaz
    * @desc Registers the on change function to the value accessor
    */
-  registerOnChange( fn: any ): void {
+  registerOnChange(fn: any): void {
     this.onChange = fn;
   }
 
@@ -346,7 +346,9 @@ export class AngularTagsInputComponent implements OnInit, AfterViewInit, Control
     }
     this.tagInput.resetInput();
     this.itemClicked.emit(tag);
-    this.hideDropdown();
+    if (this.config.hideDDOnTagSelect) {
+      this.hideDropdown();
+    }
   }
 
   /**
@@ -432,7 +434,7 @@ export class AngularTagsInputComponent implements OnInit, AfterViewInit, Control
         return tagItem[this.config.nestedTagParentProp] == parentTag[this.config.identifier];
       }).length;
       if (
-        ( parentTagChildren > 0 && childrensSelected > 0 ) &&
+        (parentTagChildren > 0 && childrensSelected > 0) &&
         (this.config.childrenCountProperty ?
           childrensSelected === parentTag[this.config.childrenCountProperty] :
           childrensSelected === parentTagChildren

projects/angular-tags-input/src/lib/tags-input-interfaces.ts

@@ -23,6 +23,7 @@ export interface AngularTagsInputConfig {
   dropdownClass?: string;
   showParentTagsOnly?: boolean;
   hideDDOnBlur?: boolean;
+  hideDDOnTagSelect?: boolean
 }
 
 export interface AngularTagsInputDDFns {

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

@@ -348,6 +348,9 @@ <h5 class="main__form__heading">1. Input with subtypes and selected items are ma
     <input type="checkbox" name="dd backdrop" [checked]="nestedTagsInputConfig.ddHasBackdrop" (change)="changeNestedConfigOption($event, 'ddHasBackdrop')">
     <label for="dd backdrop">Dropdown has backdrop</label> &nbsp; &nbsp;
 
+    <input type="checkbox" name="hide-dd-on-select" [checked]="nestedTagsInputConfig.hideDDOnTagSelect" (change)="changeNestedConfigOption($event, 'hideDDOnTagSelect')">
+    <label for="dd backdrop">Hide dropdown on Tag selection</label> &nbsp; &nbsp;
+
     <h5>2. Custom nested component without showing tick on selected items.</h5>
 		<ti-angular-tags-input formControlName="nestedData" class="main__form__ti" [tagsData]="(sampleDataNested$ | async)"
     (tagAdded)="onTagAdded($event)" (valueChanged)="onValChanged($event)" [config]="nestedTagsInputConfig1"

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

@@ -55,7 +55,8 @@ export class AppComponent {
     clearInputOnFocus: true,
     showParentTagsOnly: true,
     hideTags: false,
-    ddHasBackdrop: true
+    ddHasBackdrop: true,
+    hideDDOnTagSelect: true, // to close on selecting a tag
   };
 
   simpleTagsInputConfig: AngularTagsInputConfig = {