Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Question] How do I fire a change event? #15813

Closed
nrhoffmann opened this issue Jul 20, 2022 · 7 comments
Closed

[Question] How do I fire a change event? #15813

nrhoffmann opened this issue Jul 20, 2022 · 7 comments

Comments

@nrhoffmann
Copy link
Contributor

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

How can I do that?

@dgozman
Copy link
Contributor

dgozman commented Jul 20, 2022

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
Copy link
Contributor Author

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
Copy link
Contributor

dgozman commented Jul 20, 2022

@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
Copy link
Contributor Author

@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
Copy link
Contributor

dgozman commented Jul 21, 2022

@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
Copy link
Contributor Author

@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
Copy link
Contributor

dgozman commented Jul 22, 2022

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

@dgozman dgozman closed this as completed Jul 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants