# Keyboard event dispatch is not working

**URL:** <https://discourse.mozilla.org/t/keyboard-event-dispatch-is-not-working/90173>\
**Category:** Development\
**Created:** [December 13, 2021, 12:45pm UTC](https://discourse.mozilla.org/t/keyboard-event-dispatch-is-not-working/90173 "2021-12-13T12:45:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![weddec1](https://avatars.discourse-cdn.com/v4/letter/w/9de053/32.png) [@weddec1](https://discourse.mozilla.org/u/weddec1)\
**Post date:** [December 13, 2021, 12:45pm UTC](https://discourse.mozilla.org/t/keyboard-event-dispatch-is-not-working/90173/1 "2021-12-13T12:45:15Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![juraj.masiar](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/juraj.masiar/32/30587_2.png) [@juraj.masiar](https://discourse.mozilla.org/u/juraj.masiar)\
**Post date:** [December 13, 2021, 1:31pm UTC](https://discourse.mozilla.org/t/keyboard-event-dispatch-is-not-working/90173/2 "2021-12-13T13:31:49Z")

</div>

You can try to select the form element and call `.submit()` method on it.  
Or try to dispatch the [submit event](https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/SubmitEvent):

> <https://stackoverflow.com/questions/7166007/how-to-submit-button-less-form-with-dispatchevent/17998819#17998819>

---

<div class="post-metadata">

**Author:** ![weddec1](https://avatars.discourse-cdn.com/v4/letter/w/9de053/32.png) [@weddec1](https://discourse.mozilla.org/u/weddec1)\
**Post date:** [December 13, 2021, 10:43pm UTC](https://discourse.mozilla.org/t/keyboard-event-dispatch-is-not-working/90173/3 "2021-12-13T22:43:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![weddec1](https://avatars.discourse-cdn.com/v4/letter/w/9de053/32.png) [@weddec1](https://discourse.mozilla.org/u/weddec1)\
**Post date:** [December 14, 2021, 12:50am UTC](https://discourse.mozilla.org/t/keyboard-event-dispatch-is-not-working/90173/4 "2021-12-14T00:50:59Z")

</div>

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 …

---

<div class="post-metadata">

**Author:** ![weddec1](https://avatars.discourse-cdn.com/v4/letter/w/9de053/32.png) [@weddec1](https://discourse.mozilla.org/u/weddec1)\
**Post date:** [December 14, 2021, 3:01am UTC](https://discourse.mozilla.org/t/keyboard-event-dispatch-is-not-working/90173/5 "2021-12-14T03:01:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![juraj.masiar](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/juraj.masiar/32/30587_2.png) [@juraj.masiar](https://discourse.mozilla.org/u/juraj.masiar)\
**Post date:** [December 14, 2021, 8:49am UTC](https://discourse.mozilla.org/t/keyboard-event-dispatch-is-not-working/90173/6 "2021-12-14T08:49:09Z")

</div>

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

> **[HTMLFormElement: submit() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit)**
>
> The HTMLFormElement.submit() method submits a given
> .

Try to run this:

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

```

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

---

<div class="post-metadata">

**Author:** ![freaktechnik](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/freaktechnik/32/37766_2.png) [@freaktechnik](https://discourse.mozilla.org/u/freaktechnik)\
**Post date:** [December 14, 2021, 10:28am UTC](https://discourse.mozilla.org/t/keyboard-event-dispatch-is-not-working/90173/7 "2021-12-14T10:28:04Z")

</div>

> [@juraj.masiar](#):
>
> Try to run this:
> 
> ```auto
> document.querySelector('form').submit();
> 
> ```
> 
> It’s gonna find any form on the page and call submit on it.

Or if `input` is your input element:

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

```