Skip to content

Commit

Permalink
[BUGFIX] Tests and support for native DOM events on Inputs
Browse files Browse the repository at this point in the history
  • Loading branch information
@wagenet
wagenet committed Mar 20, 2019
1 parent a142948 commit d7f9ebe
Show file tree
Hide file tree
Showing 5 changed files with 181 additions and 2 deletions.
4 changes: 3 additions & 1 deletion packages/@ember/-internals/glimmer/lib/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export const ROOT_REF = symbol('ROOT_REF');
export const IS_DISPATCHING_ATTRS = symbol('IS_DISPATCHING_ATTRS');
export const HAS_BLOCK = symbol('HAS_BLOCK');
export const BOUNDS = symbol('BOUNDS');
export const DISABLE_TAGLESS_EVENT_CHECK = symbol('DISABLE_TAGLESS_EVENT_CHECK');

/**
@module @ember/component
Expand Down Expand Up @@ -650,7 +651,8 @@ const Component = CoreView.extend(
assert(
// tslint:disable-next-line:max-line-length
`You can not define a function that handles DOM events in the \`${this}\` tagless component since it doesn't have any DOM element.`,
this.tagName !== '' ||
this[DISABLE_TAGLESS_EVENT_CHECK] ||
this.tagName !== '' ||
!this.renderer._destinedForDOM ||
!(() => {
let eventDispatcher = getOwner(this).lookup<any | undefined>('event_dispatcher:main');
Expand Down
7 changes: 6 additions & 1 deletion packages/@ember/-internals/glimmer/lib/components/input.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { computed } from '@ember/-internals/metal';
import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
import { assert } from '@ember/debug';
import { DEBUG } from '@glimmer/env';
import Component from '../component';
import Component, { DISABLE_TAGLESS_EVENT_CHECK } from '../component';

let Input: any;

Expand Down Expand Up @@ -148,6 +148,11 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
Input = Component.extend({
tagName: '',

init() {
this[DISABLE_TAGLESS_EVENT_CHECK] = true;
this._super(...arguments);
},

isCheckbox: computed('type', function(this: { type?: unknown }) {
return this.type === 'checkbox';
}),
Expand Down
50 changes: 50 additions & 0 deletions packages/@ember/-internals/glimmer/lib/templates/input.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,31 @@
@autofocus={{@autofocus}}
@required={{@required}}
@form={{@form}}

@touchStart={{@touchStart}}
@touchMove={{@touchMove}}
@touchEnd={{@touchEnd}}
@touchCancel={{@touchCancel}}
@keyDown={{@keyDown}}
@keyUp={{@keyUp}}
@keyPress={{@keyPress}}
@mouseDown={{@mouseDown}}
@mouseUp={{@mouseUp}}
@contextMenu={{@contextMenu}}
@click={{@click}}
@doubleClick={{@doubleClick}}
@mouseMove={{@mouseMove}}
@submit={{@submit}}
@input={{@input}}
@change={{@change}}
@dragStart={{@dragStart}}
@drag={{@drag}}
@dragEnter={{@dragEnter}}
@dragLeave={{@dragLeave}}
@dragOver={{@dragOver}}
@drop={{@drop}}
@dragEnd={{@dragEnd}}

...attributes
/>
{{~else~}}
Expand Down Expand Up @@ -64,6 +89,31 @@
@type={{@type}}
@value={{@value}}
@width={{@width}}

@touchStart={{@touchStart}}
@touchMove={{@touchMove}}
@touchEnd={{@touchEnd}}
@touchCancel={{@touchCancel}}
@keyDown={{@keyDown}}
@keyUp={{@keyUp}}
@keyPress={{@keyPress}}
@mouseDown={{@mouseDown}}
@mouseUp={{@mouseUp}}
@contextMenu={{@contextMenu}}
@click={{@click}}
@doubleClick={{@doubleClick}}
@mouseMove={{@mouseMove}}
@submit={{@submit}}
@input={{@input}}
@change={{@change}}
@dragStart={{@dragStart}}
@drag={{@drag}}
@dragEnter={{@dragEnter}}
@dragLeave={{@dragLeave}}
@dragOver={{@dragOver}}
@drop={{@drop}}
@dragEnd={{@dragEnd}}

...attributes
/>
{{~/if~}}
Expand Down
61 changes: 61 additions & 0 deletions packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,59 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
element.dispatchEvent(event);
});
}

assertTriggersNativeDOMEvents(type) {
// Defaults from EventDispatcher
let events = {
touchstart: 'touchStart',
touchmove: 'touchMove',
touchend: 'touchEnd',
touchcancel: 'touchCancel',
keydown: 'keyDown',
keyup: 'keyUp',
keypress: 'keyPress',
mousedown: 'mouseDown',
mouseup: 'mouseUp',
contextmenu: 'contextMenu',
click: 'click',
dblclick: 'doubleClick',
mousemove: 'mouseMove',
// These four are specially handled elsewhere
// focusin: 'focusIn',
// focusout: 'focusOut',
// mouseenter: 'mouseEnter',
// mouseleave: 'mouseLeave',
submit: 'submit',
input: 'input',
change: 'change',
dragstart: 'dragStart',
drag: 'drag',
dragenter: 'dragEnter',
dragleave: 'dragLeave',
dragover: 'dragOver',
drop: 'drop',
dragend: 'dragEnd',
};

let triggeredEvents = [];

let typeAttr = type ? `type="${type}" ` : '';
let actionAttrs = Object.keys(events).map(evt => `@${events[evt]}={{action 'run_${evt}'}}`);
let template = `<Input ${typeAttr}${actionAttrs.join(' ')} />`;

let actions = {};
Object.keys(events).forEach(evt => {
actions[`run_${evt}`] = function() {
triggeredEvents.push(evt);
};
});

this.render(template, { actions });

Object.keys(events).forEach(evt => this.triggerEvent(evt));

this.assert.deepEqual(triggeredEvents, Object.keys(events), 'called for all events');
}
}

moduleFor(
Expand Down Expand Up @@ -645,6 +698,10 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
this.assert.equal(this.$input()[0].type, 'text');
this.assert.equal(this.$input()[1].type, 'file');
}

['@test sends an action with `<Input EVENT={{action "foo"}} />` for native DOM events']() {
this.assertTriggersNativeDOMEvents();
}
}
);

Expand Down Expand Up @@ -892,6 +949,10 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
this.assertAttr('tabindex', '10');
this.assertAttr('name', 'original-name');
}

['@test sends an action with `<Input EVENT={{action "foo"}} />` for native DOM events']() {
this.assertTriggersNativeDOMEvents('checkbox');
}
}
);

Expand Down
61 changes: 61 additions & 0 deletions packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,59 @@ class InputRenderingTest extends RenderingTestCase {
element.dispatchEvent(event);
});
}

assertTriggersNativeDOMEvents(type) {
// Defaults from EventDispatcher
let events = {
touchstart: 'touchStart',
touchmove: 'touchMove',
touchend: 'touchEnd',
touchcancel: 'touchCancel',
keydown: 'keyDown',
keyup: 'keyUp',
keypress: 'keyPress',
mousedown: 'mouseDown',
mouseup: 'mouseUp',
contextmenu: 'contextMenu',
click: 'click',
dblclick: 'doubleClick',
mousemove: 'mouseMove',
// These four are specially handled elsewhere
// focusin: 'focusIn',
// focusout: 'focusOut',
// mouseenter: 'mouseEnter',
// mouseleave: 'mouseLeave',
submit: 'submit',
input: 'input',
change: 'change',
dragstart: 'dragStart',
drag: 'drag',
dragenter: 'dragEnter',
dragleave: 'dragLeave',
dragover: 'dragOver',
drop: 'drop',
dragend: 'dragEnd',
};

let triggeredEvents = [];

let typeAttr = type ? `type="${type}" ` : '';
let actionAttrs = Object.keys(events).map(evt => `${events[evt]}=(action 'run_${evt}')`);
let template = `{{input ${typeAttr}${actionAttrs.join(' ')}}}`;

let actions = {};
Object.keys(events).forEach(evt => {
actions[`run_${evt}`] = function() {
triggeredEvents.push(evt);
};
});

this.render(template, { actions });

Object.keys(events).forEach(evt => this.triggerEvent(evt));

this.assert.deepEqual(triggeredEvents, Object.keys(events), 'called for all events');
}
}

moduleFor(
Expand Down Expand Up @@ -552,6 +605,10 @@ moduleFor(
this.assert.equal(this.$input()[0].type, 'text');
this.assert.equal(this.$input()[1].type, 'file');
}

['@test sends an action with `{{input EVENT=(action "foo")}}` for native DOM events']() {
this.assertTriggersNativeDOMEvents();
}
}
);

Expand Down Expand Up @@ -731,6 +788,10 @@ moduleFor(
this.assertAttr('tabindex', '10');
this.assertAttr('name', 'original-name');
}

['@test sends an action with `{{input EVENT=(action "foo")}}` for native DOM events']() {
this.assertTriggersNativeDOMEvents('checkbox');
}
}
);

Expand Down

0 comments on commit d7f9ebe

Please sign in to comment.