[Question] How do I fire a change event?

[nrhoffmann]

I would like to trigger a particular input's onchange event listener.

How can I do that?

[dgozman]

Ideally, you should locator.fill() or something like that to emulate what the actual user would do.

That said, you can directly dispatch a 'change' event with locator.dispatchEvent().

[nrhoffmann]

I see.

The issue I am encountering is that an upstream component in my application binds to onchange instead of oninput and Playwright's fill only emits an input event.

[dgozman]

@nrhoffmann onchange will be fired once the input blurs. Try focusing some other element and see. But I think that's actually the bug in the component 😄

[nrhoffmann]

@dgozman Yes, it probably is.

I was hoping there would be a way to configure the locator.fill() and make it work for me, because it doesn't really emulate a user and it seems to exist for the convince of the developer. Unless I'm missing something, I don't think a user can fill an input using a keyboard and mouse. They can type, but not fill.

I appreciate your help and responsiveness.

[dgozman]

@nrhoffmann fill is basically equivalent to focusing the input and pasting the text, apart from the paste event on the document. It is strictly equivalent to some a11y-specific input methods that insert text directly. So I would say it's like a real user, although it's not the most common way of entering the text.

Anyway, did you try dispatchEvent()? I think it should work for you.

[nrhoffmann]

@dgozman It did work, but the framework (Blazor) is not picking it up, maybe because it is not trusted? I will have to do more poking around. I'm not stuck because clicking out and type work; the component handles every event except for oninput, definitely a bug.

[dgozman]

Indeed, event from dispatchEvent() will not be isTrusted. Thanks for confirming the other workarounds. I'll close the issue now.