dropdown is not opening after search in ng select2

[afeef1915]

Hi

I had problem after search specific keyword dropdown is not opening after search for keyword.

i need to click on textbox then dropdown populates.

html

             <span class="select2-container select2-container--default select2-container--open" style="position: absolute; top: 255px; left: 823.484px;">

Angular code

   this.options = {
  width: '258',
  multiple: true,
  tags: false
};

This class gets hidden after click on textbox its is visible.

Problem

when class "select2-container select2-container--default select2-container--open" is visible after click on textbox.

After Ajax Response this class gets hides.

			changed(search: any) {

					   //call service pass search text to service
						return this.cl.searchFunc(search).subscribe(
						  res1 => 
								  this.select2data = res1.data;
								  this.cd.markForCheck(); // marks path
								 this.cd.detectChanges();
							  }
							}
						  },
						  error => {
							console.log('error  = ', error);
						  });
					  }

Ng select2 class

		import { AfterViewInit, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';
		import { ControlValueAccessor } from '@angular/forms';
		import { Select2OptionData } from './ng-select2.interface';
		import { Options } from 'select2';
		export declare class NgSelect2Component implements AfterViewInit, OnChanges, OnDestroy, OnInit, DoCheck, ControlValueAccessor {
			private renderer;
			zone: NgZone;
			_element: ElementRef;
			selector: ElementRef;
			data: Array<Select2OptionData>;
			placeholder: string;
			dropdownParent: string;
			allowClear: boolean;
			value: string | string[];
			width: string;
			disabled: boolean;
			options: Options;
			valueChanged: EventEmitter<{}>;
			private element;
			private check;
			constructor(renderer: Renderer2, zone: NgZone, _element: ElementRef);
			ngDoCheck(): void;
			ngOnInit(): void;
			ngOnChanges(changes: SimpleChanges): void;
			ngAfterViewInit(): void;
			ngOnDestroy(): void;
			private initPlugin;
			private setElementValue;
			writeValue(value: any): void;
			propagateChange: (value: any) => void;
			registerOnChange(fn: any): void;
			registerOnTouched(): void;
		}

Also please guide i need after search list should be empty.

can you please guide anything im missing.

i have replicated problem im using https://github.com/tealpartners/ng-select2/tree/master/src/app/demos/multiple
for static select2 as well as dynamic.

1. static select2 work fine.
2. dynamic problem need to click on textbox to open dropdown which is wrong,
   because as soon you search list of data show be available in list.

please have a look.

[icecoldfire]

Dear

I don't understand the issue could you please make a minimal reproducible example using stackblitz.com?

What is the behaviour you expect?

[afeef1915]

I need when we search in textbox .

After search we bind data in [data]=[select2data].

	changed(search: any) {

				   //call service pass search text to service
					return this.cl.searchFunc(search).subscribe(
					  res1 => 
							  this.select2data = res1.data;
							  this.cd.markForCheck(); // marks path
							 this.cd.detectChanges();
						  }
						}
					  },
					  error => {
						console.log('error  = ', error);
					  });
				  }

Problem

After Response Dropdown Html.

   <span class="select2-container select2-container--default select2-container--open" style="position: absolute; top: 255px; left: 823.484px;">

Dropdown hides after search. its visible after click on textbox.

but on click on textbox dropdown visible : fine
but after search : dropdown hides after appending response

Issue in code

debugger halts

d.prototype._registerSelectionEvents = function() {
var n = this
, r = ["toggle", "focus"];
this.selection.on("toggle", function() {
n.toggleDropdown()
}),
this.selection.on("focus", function(e) {
n.focus(e)
}),
this.selection.on("*", function(e, t) {
-1 === i.inArray(e, r) && n.trigger(e, t)
})
}
,

its problem in toggling function

[icecoldfire]

I'm not finding the link to minimal reproducible example using stackblitz.com, could you please share this link with me?

[afeef1915]

you try same code with Angular

try with subscribe and save response [data]="select2data "
<ng-select2
[data]="select2data "
[options]="options"
[width]="500"
[formControlName]="field.code"
(keyup)="changed($event.target.value)"

			changed(search: any) {

			//call service pass search text to service
					return this.cl.searchFunc(search).subscribe(
					res1 => 
					  this.select2data = res1.data;
					  this.cd.markForCheck(); // marks path
					 this.cd.detectChanges();
					}
					}
					},
					error => {
					console.log('error  = ', error);
					});
			}

The way subscribe works.

Problem is after saving subscribe response

for example sample data

this.select2data = [
{
id: 'multiple1',
text: 'Multiple 1'
},
{
id: 'multiple2',
text: 'Multiple 2'
},
{
id: 'multiple3',
text: 'Multiple 3'
},
{
id: 'multiple4',
text: 'Multiple 4'
}
];

After subscribe response dropdown hides.

dropdown only visible after you click on textbox that's bug.

Thanks

[icecoldfire]

Thank you for the further explaining of the issue. Could you please give me the link to minimal reproducible example using stackblitz.com?

[afeef1915]

stackblitz

https://stackblitz.com/edit/angular-dtcqnc

ERROR
Error: jQuery is not defined

[icecoldfire]

Thank you for the link.

Error: jQuery is not defined

This issue comes from that you include jquery using angular.json. See: stackblitz/core#407

I have build the project locally and everything works fine. Because there is no issue in your project I'm going to close the issue for now.

Keep me updated when the issue persists.

[afeef1915]

Your project doesn't have stackblitz demo.

as you said it will not work on stackblitz.

why can't you try to build a demo using Angular 8 on stackblitz.

can you please try with my code above .

by subscribing you replicate error.

				<ng-select2
				[data]="select2data "
				[options]="options"
				[width]="500"
				[formControlName]="field.code"
				(keyup)="changed($event.target.value)">

				typescript code

				changed(search: any) {

				//call service pass search text to service
				return this.cl.searchFunc(search).subscribe(
				res1 => 
				this.select2data = [
				{
				id: 'multiple1',
				text: 'Multiple 1'
				},
				{
				id: 'multiple2',
				text: 'Multiple 2'
				},
				{
				id: 'multiple3',
				text: 'Multiple 3'
				},
				{
				id: 'multiple4',
				text: 'Multiple 4'
				}
				];
				}
				}
				},
				error => {
				console.log('error  = ', error);
				});
				}

[icecoldfire]

Your project doesn't have stackblitz demo.
as you said it will not work on stackblitz.
sorry to say your plugin is most pathetic i have found on google and support is even worse.
i wouldn't recommend to anyone

Sorry to hear that you don't like this open source project and the volunteer support of the maintainers. Please fork us so that you can make this project even better!

Keep us posted with the progress you make so that we can push it upstream.