Keyboard event dispatch is not working

Add-ons Development
1

In testing my extension, I’ve encountered a page that requires the user to enter an input value for form submission. That is, there is no ‘click’ a submit button option. I’m trying to simulate input data entry then dispatch an ‘Enter’ keydown event, but its not working.

const postcode = "5555"
const inputA = document.querySelector("a css selector that works")
inputA.value = postcode
inputA.focus()
inputA.dispatchEvent(new KeyboardEvent( 'keydown', {'key': 'Enter'} ));

I’ve tried to force the cursor to appear in the input but nothing works. I tried : focus() and select(). My KeyboardEvent constructor format is right according to the Mozilla docs.
Any ideas?

2

You can try to select the form element and call .submit() method on it.
Or try to dispatch the submit event:

3

Ah yes, of course ! … I recall checking the type which is ‘text’ and that I think caused me to not bother trying the submit method … anyway I’ll give it a try.

4

Managed to simulate a proper data entry, by focusing first which puts the cursor into the input, then setting the value, but the KeyboardEvent does not activate the attached onKeydown({key=‘Enter’}) site code.

I tried input.submit(), but doesn’t work, console reports an error ‘submit is not a function’. Tried changing the input type from ‘text’ to ‘submit’, then input.click(), but no change …

5

From searching on this subject, I’ve learned that KeyboardEvent.dispatch permission is considered a fairly serious security threat.
I’ve searched the mozilla extension permissions document, and don’t see an obvious KeyboardEventDispatch type of item … maybe BrowserSettings.
Can any extension experts advise about a KeyboardEventDispatch API blocker that exists, and how to avoid it for development purposes?
An API security block on KeyboardEventDispatch seems unlikely, since I know that the marionette-driver python package has an marionette.HTMLElement.send_keys(Key.ENTER) method, that works guaranteed.
I’ll be searching the marionette source code next … if anyone has a workaround please advise.

6

Only the “Form” element has submit method, not the input:

Try to run this:

document.querySelector('form').submit();

It’s gonna find any form on the page and call submit on it.

7

Or if input is your input element:

input.closest("form")?.submit();