unable to simulate click event on <select> element with onchange function

jest simulate click
trigger event in jest
jest enzyme test onclick
jest simulate mousedown
enzyme simulate change
jest click on div
jest test link click
jest events

I'm working on a project with a chrome plugin to manipulate a web site content and add some more functionalities.

I have a <select> element I want to manipulate:

<select id="thePage:form:pBlock:address:addressTypeSelectionDropdown" name="thePage:form:pBlock:address:addressTypeSelectionDropdown" size="1" onchange="onchangeOfPicklist();">    
    <option value="User Entry">User Entry</option>
    <option value="CustomerID">CustomerID</option>
    <option value="Closest to Customer">Closest to Customer</option>
    <option value="Location">Location</option>
    <option value="Customer's Address" selected="selected">Customer's Address</option>
</select>

I would like to change the select option in specific if conditions, but this doesn't seems to work whatever I do. So far I have tried almost everything, but it seems the onchange trigger is doing the magic, otherwise click simulations and trying to change options doesn't seem to work. So far I have tried different approaches, but they all seems not to trigger an option:

let customerAddress = labelAddress.parent().next().first().find("select");
customerAddress.children('[value="Closest to Customer"]').trigger("change");

and also :

customerAddress.children('[value="Closest to Customer"]').attr("selected", "selected");
customerAddress.children('[value="Closest to Customer"]').change();

and

customerAddress
.find('option:Closest to Customer')
.prop('selected',true)
.trigger('change');

and even simulating keypress:

let e = jQuery.Event("keydown");
e.which = 13; // # enter
customerAddress.focus();
customerAddress.trigger(e);

Here I have no idea why the event is not being triggered.

I'm adding an event listener and the console doesn't indicate the event trigger:

document.addEventListener("keydown", function (event) {
console.log("KeyPress: " + event.which);
});

or like this :

let e = jQuery.Event("keydown");
e.which = 13; // # enter 
customerAddress.focus();
customerAddress.attr("size", 5);
customerAddress.children('[value="Closest to Customer"]').focus();
customerAddress.children('[value="Closest to Customer"]').trigger(e);

Please note that I'm working on the chrome plugin and I only can change the source code of this plugin and manipulate elements on the webpage, not able to change the source code of the webpage / scripts and functions.

My question is, is there a way to trigger the embedded onchange function in the <select> element?

https://jsfiddle.net/zlobul/sb8js1we/11/


The change event is triggered at select element level not option, so :

let customerAddress = labelAddress.parent().next().first().find("select");
customerAddress.change();

should do the trick and trigger a change event for the select element. And if you want to set the value use val() :

customerAddress.val("Closest to Customer");

See Set an option value as selected

unable to simulate click event on <select> element with onchange , The change event is triggered at select element level not option , so : let customerAddress = labelAddress.parent().next().first().find("select");  Hello everyone, In our desktop application I have built the main navigation using button controls, where each button loads a defined view. My idea is that the default view is loaded by triggering a click-event on the first button once the page has lo


Have you tried:

let select = document.getElementById("thePage:form:pBlock:address:addressTypeSelectionDropdown")
select.addEventListener("change", (event)=>{
    console.log(event)
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.content = "onchangeofPicklist()"
    select.appendChild(s);
})

You need to intercept the change event using an event listener, and you should be able to call the existing change event handler (if necessary) from your new (extended) handler by injecting a script into the document.

JSFiddle

Simulating Click on Child Component not registering · Issue #907 , On using mount() I'm able to simulate the click, but am unable to detect the function call of the parent component which was sent as props to the  application.click. click. i do not need a mouse click event. i need the vb to perform a click on a selected cell. ===== i can save another post on a similar problem: how do i limit a vb to performing the task only once / for one mouse click. the problem would be if 2 clicks were accidently performed.


ok here is what I did to make this working, similar to Michael.Lumley's answer :

let execFunct = function () {
    let script: HTMLScriptElement = document.createElement("script");
    script.textContent = "onchangeOfPicklist()";
    (document.head || document.documentElement).appendChild(script);
    script.parentNode.removeChild(script);
}

once I change the dropdown I execute the execFunct().

Simulate click on div or span element failed · Issue #1822 , Describe the bug I want to simulate click on a div or span element, but failed (it can work on a, button elements) and got a error as follows  The best way to simulate mouse events is to call the On EventName method that raises the mouse event you want to simulate. This option is usually possible only within custom controls and forms, because the methods that raise events are protected and cannot be accessed outside the control or form.


Simulate Browser Events in React with React Testing Library , Once we have this node, we're able to dispatch the click event on it with fireEvent.​click . The onClick prop to <Button /> is the value of a  The change event is triggered at select element level not option, so : let customerAddress = labelAddress.parent().next().first().find("select"); customerAddress.change(); should do the trick and trigger a change event for the select element. And if you want to set the value use val() :


Element: click event, An element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while  Click ="DrawCircleButton_Click" </ Button > The code for the click event handler looks like following. private void DrawCircleButton_Click(object sender, RoutedEventArgs e) { } Now, whatever code you write in the click event handler that will be executed on the Button click. The code listed in Listing 3 creates a circle on the Button click


.dblclick(), Now double-clicking on this element displays the alert: Handler for .dblclick() called. To trigger the event manually, call .dblclick() without an argument:  How to: Create Event Handlers at Run Time for Windows Forms. 03/30/2017; 2 minutes to read +8; In this article. In addition to creating events using the Windows Forms Designer in Visual Studio, you can also create an event handler at run time.