dropdown is not opening after search in ng select2

[tealpartners]

dropdown is not opening after search in ng select2

[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.