`syn.type()` with `[escape]` string does press escape, but also appends `escape` text

[mvorisek]

v0.15.0 / latest

repro:

1. create a page with some <input control` (or download https://dev.atk4.org/demos/javascript/vue-component.php source)
2. include syn.js
3. in developer console eval window.syn.type($('input[name=atk_fp_country__name]')[0], '[escape]', function () {})
4. notice the esc key is pressed (=detected by JS), but the input value flashes with escape text appended shortly, which is not expected nor normally appended by a native event

PS with [backspace] I do not observe a simillar problem.

@justinbmeyer any idea how to fix it?

[mvorisek]

here is a log of events fired natively:

such log can be easily enabled in Firefox:

UPDATE: the blur was called by https://github.com/atk4/ui/blob/1ea7959cbd/js/src/vue-components/inline-edit.component.js#L71 - natively, it is not emit

---

in syn.js, currently, additional events caused by a keypress are defined in https://github.com/bitovi/syn/blob/c9dfa58449/src/key.js#L546 (for [enter] key for example) and triggered in https://github.com/bitovi/syn/blob/c9dfa58449/src/key.js#L850

for [escape] this is currently not working as: a) escape has no defaults like l546 for enter defined b) keyup is always called after - https://github.com/bitovi/syn/blob/c9dfa58449/src/key.js#L879 - but it needs to be called prior blur event - so adding escape defaults like:

            'escape': function () {
                var nodeName = this.nodeName.toLowerCase();
                if (document.activeElement === this) {
                    if (nodeName === 'input' || nodeName === 'textarea') {
                        syn.trigger(this, 'change', {});
                        syn.trigger(this, 'blur', {});
                    }
                }
            },

is not enough

the escape keyup ((if changed) -> change) -> blur order is important as blur is often used to handle changes and escape key to clear them

---

the syn.js events order can be debug by:

window.syn.type(document.getElementsByName("atk_fp_country__name")[0], 'x[escape]', () => console.log('syn complete'))

from F12 console