search

valor-software / ng2-select

Angular based replacement for select boxes
http://valor-software.github.io/ng2-select/
MIT License
675 stars 585 forks source link

In 1.0.1-beta.0, if there are multiple selects in a single view they both open when clicked #22

Open rlodge opened 8 years ago

rlodge commented 8 years ago

In addition, clicking on the first one always locates my cursor for typing in the last one.

The demo in this fork / branch shows the problem: https://github.com/rlodge/ng2-select/tree/issue-22-demo

brendanalexdr commented 8 years ago

Yes I am experiencing this too. I have 7 ng-selects on a page, they all open at once

brendanalexdr commented 8 years ago

Yes I am experiencing this too. I have 7 ng-selects on a page, they all open at once

brendanalexdr commented 8 years ago

Yes I am experiencing this too. I have 7 ng-selects on a page, they all open at once

rlodge commented 8 years ago

I made an attempt, logged above, to fix this. It's a little raw and untested, as I've decided to do something different for the app I'm working on, but at least on the demo page it fixed this bug. It rewrote core parts of the event handling code, and I don't know if the behavior remained 100% the same.

joealmeida commented 8 years ago

I am having the same problem.

@rlodge I know is just a little raw but using [hidden] instead of ngIf will cause errors in IE9/10.

Not sure why *ngIf is not working here. We can use [class.hidden] maybe?

See: angular/angular#5774

rlodge commented 8 years ago

@knifir I wasn't aware of that. My current work projects are targeting only IE 11 & edge.

I unfortunately don't have a lot of time to mess with it at the moment (I've gone a different with the UI I'm working, wrapping the latest release of Selectize in a directive, partly so I could learn more about writing angular 2 directives).

I switched to [hidden] instead of *ngIf because of the way I decided to do detection of which element was clicked in getOffSideClickHandler. The element.contains code was the easiest way to do it, but it didn't work with *ngIf because by the time the click was received by the handler, the element had been removed by angular from the DOM, and so the check was always false. [hidden] was the easy solution to that.

An alternative to [hidden] would be to add a unique class to the element and its children, and use that. E.g. instead of using ui-select to check if you're on the element managed by the current instance of the component, all elements in the template should contain a class of ng2-select-<UUID> or similar, and then check for that instead of element.contains.

afortaleza commented 8 years ago

@ronzeidman has fixed this issue here https://github.com/ronzeidman/ng2-select/commit/4590bb25d340bb0a085db0f66cd503cf87ed5dcc

mpetkov commented 8 years ago

So when will this fix be merged into the repo?

abhishek11210646 commented 8 years ago

can anyone provide solution for validation in this ng2-select.??????????