Skip to content

Commit a391f35

Browse files
Zain AsifAhsanAyaz
Zain Asif
authored andcommitted
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.
1 parent 101945a commit a391f35

File tree

4 files changed

+12
-5
lines changed

4 files changed

+12
-5
lines changed

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export class AngularTagsInputComponent implements OnInit, AfterViewInit, Control
6363
hideTags: false,
6464
maxItems: null,
6565
nestedTagParentProp: '',
66-
keyboardActiveClass: 'angular-tags-dropdown__list__item--active'
66+
keyboardActiveClass: 'angular-tags-dropdown__list__item--active',
6767
};
6868
onChange: (items: AngularTagItem[]) => void;
6969
dropdownOverlayPosition = [
@@ -179,7 +179,7 @@ export class AngularTagsInputComponent implements OnInit, AfterViewInit, Control
179179
* @author Ahsan Ayaz
180180
* @desc Registers the on change function to the value accessor
181181
*/
182-
registerOnChange( fn: any ): void {
182+
registerOnChange(fn: any): void {
183183
this.onChange = fn;
184184
}
185185

@@ -346,7 +346,9 @@ export class AngularTagsInputComponent implements OnInit, AfterViewInit, Control
346346
}
347347
this.tagInput.resetInput();
348348
this.itemClicked.emit(tag);
349-
this.hideDropdown();
349+
if (this.config.hideDDOnTagSelect) {
350+
this.hideDropdown();
351+
}
350352
}
351353

352354
/**
@@ -432,7 +434,7 @@ export class AngularTagsInputComponent implements OnInit, AfterViewInit, Control
432434
return tagItem[this.config.nestedTagParentProp] == parentTag[this.config.identifier];
433435
}).length;
434436
if (
435-
( parentTagChildren > 0 && childrensSelected > 0 ) &&
437+
(parentTagChildren > 0 && childrensSelected > 0) &&
436438
(this.config.childrenCountProperty ?
437439
childrensSelected === parentTag[this.config.childrenCountProperty] :
438440
childrensSelected === parentTagChildren

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export interface AngularTagsInputConfig {
2323
dropdownClass?: string;
2424
showParentTagsOnly?: boolean;
2525
hideDDOnBlur?: boolean;
26+
hideDDOnTagSelect?: boolean
2627
}
2728

2829
export interface AngularTagsInputDDFns {

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,9 @@ <h5 class="main__form__heading">1. Input with subtypes and selected items are ma
348348
<input type="checkbox" name="dd backdrop" [checked]="nestedTagsInputConfig.ddHasBackdrop" (change)="changeNestedConfigOption($event, 'ddHasBackdrop')">
349349
<label for="dd backdrop">Dropdown has backdrop</label> &nbsp; &nbsp;
350350

351+
<input type="checkbox" name="hide-dd-on-select" [checked]="nestedTagsInputConfig.hideDDOnTagSelect" (change)="changeNestedConfigOption($event, 'hideDDOnTagSelect')">
352+
<label for="dd backdrop">Hide dropdown on Tag selection</label> &nbsp; &nbsp;
353+
351354
<h5>2. Custom nested component without showing tick on selected items.</h5>
352355
<ti-angular-tags-input formControlName="nestedData" class="main__form__ti" [tagsData]="(sampleDataNested$ | async)"
353356
(tagAdded)="onTagAdded($event)" (valueChanged)="onValChanged($event)" [config]="nestedTagsInputConfig1"

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@ export class AppComponent {
5555
clearInputOnFocus: true,
5656
showParentTagsOnly: true,
5757
hideTags: false,
58-
ddHasBackdrop: true
58+
ddHasBackdrop: true,
59+
hideDDOnTagSelect: true, // to close on selecting a tag
5960
};
6061

6162
simpleTagsInputConfig: AngularTagsInputConfig = {

0 commit comments

Comments
 (0)