triggerEvent(form, 'reset') event does not seem to work

[jamesarosen]

I have a test that looks like

it('resets the form', async function(assert) {
  this.set('originalName', 'Sam')

  this.render(hbs`
    <form>
      {{my-reset-aware-input
        initialValue=originalName
        change=(action (mut name))}}
    </form>
  `)

  const input = this.$('input')[0]
  
  await fillIn(input, 'value', 'Not Sam')

  assert.equal(this.get('originalName'), 'Sam', 'initialValue ignores change')
  assert.equal(this.get('name'), 'Not Sam', 'input fires change action')

  await triggerEvent(input.form, 'reset')

  assert.equal(input.value, 'Sam', 'resets to initialValue')
})

But the reset doesn't seem to fire.

The test works if I change that line to

Ember.run(this.$(input.form), 'trigger', 'reset') // fire the event

or to

Ember.run(input.form, 'reset') // reset the form, which fires the event

[rwjblue]

Huh, that definitely seems odd. I think the first step here would be to reproduce the issue in a failing test here to the addon. I'm happy to dig into this deeper if you can submit a failing test PR...

[jamesarosen]

I wrote a test:

test('It fires form.reset events', async function(assert) {
  assert.expect(3);

  this.onReset = (e) => {
    assert.ok(true, 'a reset event is fired');
    assert.ok(e instanceof window.Event, 'It receives a native event');

    // NB this line:
    assert.equal(document.querySelector('.target-input').value, 'original value', 'resets the form');
  };

  this.render(hbs`
<form onreset={{onReset}} class="target-form" >
  <input value="default value" class="target-input">
</form>`);

  await fillIn('.target-input', 'new value');

  await triggerEvent('.target-form', 'reset');
});

The key "failure" is that the form doesn't actually reset when you fire a reset event. But I'm not sure it should. It does when you call jQuery('form.some-form').trigger('reset'). Perhaps that's a quirk of jQuery, though I don't see it in the source. Everything else passes just fine. And if I call document.querySelector('.target-form').reset(), the form resets and triggers the (native, of course) event.

You can test out the differences in this fiddle.