Ng2-select: Cannot always select item when clicking on it

[rodneyjoyce]

I have a seemingly random problem - when I click on an item SOMETIMES it selects and sometimes it does not. This is without searching or typeing anything - just using the dropdown.

I have 14 items in my dropdown:

[rodneyjoyce]

Note: This is a even worse on ipad and mobile devices - you literally cannot use the control

[arswaw]

I am having the same issue. I have to use the enter button in order to make it work. It's making my users think that the website is unresponsive.

[rodneyjoyce]

I'm now looking at other controls - it essentially means this control is unusable unfortuantely.

[arswaw]

The last thing you can try is using event.stopImmediatePropagation() in your select method. However this means you need to pass in the $event object from the select event to make the effect work in browsers with no global event object, such as Firefox.

As I said, I am having the same problem, so I'm really just grasping at straws here.

[rodneyjoyce]

Out of interest, are you using "encapsulation: ViewEncapsulation.None // Enable dynamic HTML styles" or standard text values?

Something else curious, is that the demo here: http://valor-software.com/ng2-select/ for Rich select seems to work on mobile.

[rodneyjoyce]

I noticed that the demo used an inline CSS style whereas mine uses an external stylesheet. I removed this completely and now it seems to work.

[arswaw]

I'm using standard text values. And the idea of using the inline CSS might help me out.

[rodneyjoyce]

Hmmm that's interesting that you are using standard test. But yes, try and inline any styles used by that component and see if it makes a difference. It seems to have helped in my case. I can't find any other dropdown component that lets you do styled templating

[rodneyjoyce]

Ok, I found some more bugs - on ipad the scroll bar is not usable and my workaround above does not always work. I'm going to have to find a more supported component.

[timmarks]

I'm seeing what I think is the same issue. Clicking on the text in the dropdown rarely calls my (select) method. clicking in whitespace outside of the text in the dropdown (but still in the item) calls my select method. Any ideas?

[khylias]

Hi @timmarks ,
I've look up your issue and I find a trick.
Add in your css .dropdown-item > div { pointer-events: none; }
It'll ignore the div inside the a tag and the click event work great.

[maximelafarie]

In addition to @khylias answer, if you can't open the dropdown list too, just add .ui-select-match-text to the selectors of the above css rule.

[niravpatel9898]

I faced the same issue. How I solved:

timeArray = new Array();
var temp = 00:00; //loop for pushing every 30 mins for 24 hours 00:00 to 23:30
this.timeArray.push('<span style="pointer-events:none">'+temp+'</span>');

This is the html part:
<ng-select [items]="timeArray" [multiple]=false placeholder="Start Time"></ng-select>

When I push in the array (the list which I have to show), I put the content(each element of array) in a span with pointer events none, this way I could fix it in mozilla.

[denlight]

The suggested solution with <span style="pointer-events:none">'+temp+'</span> breaks UI experience on EDGE =)