Angular2 toggle/open ng2-select dropdown - javascript

Angular 4.3+
I am using ng2-select dropdown.
I want the drop down to be opened on some event. I want to trigger the event that would open the drop down.
Dropdown:
<ng-select
[items]="list"
[(ngModel)]="modelName"
placeholder="Select">
</ng-select>
When the user clicks on the dropdown it gets focus and the list is being displayed. I would like this happen on some click event on the different button.
What I have tried so far:
this.el is ElementRef to the ng-select element. (Getting the element reference for ng-select correctly, it console log correct element that I am trying to trigger events.)
As it opens when the user clicks on it, I tried to trigger a click event on an element.
this.el.nativeElement.click();
Tried to trigger click event on .ui-select-toggle element.
this.el.nativeElement.querySelector('.ui-select-toggle').dispatchEvent(new Event('click'));
Similarly I tried to trigger focus event but didn't work.
Is there any other way that we can trigger some event on ng-select element that gets focus on ng-select and get the drop down open.

I wrap up the click event trigger code inside the setTimeOut function like below and it is working fine now.
setTimeout(() => {
this.el
.nativeElement
.querySelector('.ui-select-toggle')
.dispatchEvent(new Event('click'));
});
.ui-select-toggle is the element does dropdown toggle on click, so I figured if I trigger click event on that element it will toggle/open the drop-down.
So I tried the following(without the setTimeOut wrapper)
this.el
.nativeElement
.querySelector('.ui-select-toggle')
.dispatchEvent(new Event('click'));
And it did nothing. But when I wrap that code in setTimeOut it actually triggers the click event and I get expected functionality.
Here I am not sure why it functions like that but I believe this is something related to javascript.

If you are using multiple mode:
openNg2Select(ng2Select: SelectComponent) {
setTimeout(() => {
const ng2 = ng2Select.element.nativeElement.querySelector('.ui-select-search');
ng2.dispatchEvent(new Event('click'));
});
}
In HTML:
<ng-select #ng2Select [multiple]="true" [items]="items" (selected)="selected($event)"
(removed)="removed($event)" placeholder="Please Select"
[(ngModel)]="selectedItem">
</ng-select>
<button class="btn btn-pripary" (click)="openNg2Select(ng2Select)>Open ng2-select</button>

Related

.Click in a Onchange not working on Mac OS but works on Windows/linux

so I have an HTML part which is like
<select name="espece-prise" id="espece-prise" size="1" onchange="selectespece();">
<option value="{liste.espece}">{liste.espece}</option>
</select>
then I have an input type='file' in order to upload an image, this input is hidden and has the class 'btn_poster_photo'.
What I want
when the user uses the select (and click on an option) it triggers the 'onchange' and through the 'selectespece()' function a click on the hidden button thanks to the .Click function in selectespece().So after all these js function the result is:
select an option => it opens a window where you choose the file to upload
What I did
function selectespece() {
especeprise = $("#espece-prise").val(); //just a variable getting the value of my select (it works)
document.getElementById("btn_poster_photo").click();
}
I also did it in many different ways with jQuery
$("#espece-prise").on('change', function(){
especeprise = $("#espece-prise").val();
$(".btn_poster_photo").click();
})
What is happening?
When I select an option it triggers the click so it asks me to upload an image which is alright. This works on Chrome/Firefox/Opera... when I do it from a Windows/Ubuntu/archlinux computer
BUT
When I try it on safari/chrome from a MacOS it doesn't work, no error in console, I just select something and nothing happens. I tried to put an alert in my function 'onchange' it works, all works but not the .Click function...
I made several searches on Google but only found a few topics talking about an onclick after an onchange but not a .click in an onchange.
You can only programmatically trigger a file dialog window from a user-initiated event.
https://blog.mariusschulz.com/2016/05/31/programmatically-opening-a-file-dialog-with-javascript
In this case, I'm not sure if a change event would count, as typically a user-initiated event would be something like click, mousedown, mouseup, scroll, resize, keyup, etc.
Perhaps try to refactor to react to one of the above events (from your <select>) instead.

Fire onclick on <select> element but not on <option>

My element updates its options using the onclick() listener when clicked. The problem is the listener is firing when an option is clicked as well, so the user is unable to select anything in the updated list.
groupSelect.onclick = function() {
PopulateList();
}
I'd like to run my function only when the select element is clicked(when the menu has not dropped down yet) but not when a specific option is clicked. How can I do so? I'm writing the JS part using NodeJS.
Events will bubble up the hierarchy, so a click on an option will also trigger any events bound to its parent select.
This is fixed by stopping propagation of the event on your option listener
$('option').click(function(event){
event.stopPropagation();
//rest of code
})

How to select check box without selecting the whole row (see body)?

Say, I have an html:
<div class="row">
<input type="checkbox">
</div>
When user clicks on the whole row, it becomes highlighted (selected class added by an onClick event). I attach onClick event to elements with class .row.
When user clicks on checkbox (which is inside .row), this checkbox becomes selected. But row should not be highlighted.
Is it possible to exclude the area of the checkbox from the area of the .row for an onClick event?
UPDATE
Here is what I have now: http://jsfiddle.net/saAGU/
I don't want class to be toggled when I click exactly on checkbox.
UPDATE 2
Here is the working solution with jQuery for future use: http://jsfiddle.net/saAGU/2/
Yes, it's possible. The right way to do it is putting a onclick event on the checkbox, capture the event and stop its propagation.
Something like this:
function checkboxClick (e) {
e.stopPropagation();
}
Please tell me if it worked
add click event to every checkbox and stop its propogation .this should work -
e.stopPropagation in event handler for checkbox click
http://jsfiddle.net/saAGU/3/
If you capture the event, and look at the event.toElement, you can see if they clicked on the .row or something else.
http://jsfiddle.net/saAGU/1/
$('.row').click(function(event){
if (event.toElement !== this) // Did the user click on the row directly?
return;
$(this).toggleClass('selected');
});

jQuery HTML click event firing twice

I have a custom select menu button, and I have bound to the html click event to close it. But the event is firing twice.
http://jsfiddle.net/GnzBj/1/
$(function () {
$('html').click(function () {
console.log('html');
});
});
Any one know why/how to prevent it firing twice?
The reason why the event is triggered twice is because you have the whole UI inside a label.
<div ...>
<label for="xmod-form-51183d51afa3d" ... >
<select name="theme" id="xmod-form-51183d51afa3d" ...>
...
</select>
...
</label>
</div>
Clicking on the label will also trigger a click event on the form element it relates to.
If you remove the label element, it works as expected: http://jsfiddle.net/GnzBj/5/.
In case you need the label, let it contain as few as possible of the UI, but clicking on it will still trigger two events.

onBlur event overriding jQuery UI events

I have a textbox that is wired up using jQuery UI 1.8.4 autocomplete. I have the select event wired up so when the user chooses an item from the list it calls another JavaScript function that issues an ajax request to save the data and update an XML document.
On the same textbox there is an onBlur event so that if the user manually types the data in and tabs off the textbox without choosing an autocomplete item it also performs the update.
When the user selects an item from the autocomplete list it causes onBlur to fire which overrides the select event, thus the only data that gets updated is whatever is in the textbox that the user typed, and since the select event doesn't fire the contents of the textbox don't get updated.
I've tried using the change event with the same results.
Is there a way to ensure the select event gets fired and also implement some functionality that will emulate an onBlur in the case where a user types the value in rather than selecting it?
The problem is when the user interacts with the autocomplete menu, the textbox loses focus and the blur event fires. There is no way to really detect if the user is in the autocomplete control unless the component tells you that.
If the autocomplete control you are using does not have methods to tell you when it is closed, than you are probably stuck with using a setTimeout to wait a bit before you fire your code.
I think The onselect is always fired
"BUT" its fired only after onblur event of the textbox.
And this happens only when you use the mouse to select the autocomplete item and not through selecting the item by keyboard.
You may undo the update made on onblur with the select event depending on wether mouse click or keyboard select is made.
select: function (event, ui) {
if (event.originalEvent.originalEvent.type == 'click') {
//undo the onblur event happened by an ajax call here
//$("#txtbox").val() will still be available to do an undo
}
//do the actual onselect function here
}

Categories