[CLOSED] SpecRunnerUtils#SimulateKeyEvent should support modifier keys

[core-ai-bot]

Issue by petetnt
Friday Oct 28, 2016 at 07:57 GMT
Originally opened as adobe/brackets#12859

---

Prerequisites

• Can you reproduce the problem with Debug \ Reload Without Extensions?
• Did you perform a cursory search to see if your bug or enhancement is already reported?
• Did you read the Troubleshooting guide?

Description

There's a long running TODO in the SpecRunnerUtils here: https://github.com/adobe/brackets/blob/master/test/spec/SpecRunnerUtils.js#L998

Basically the SimulateKeyEvent method doesn't support modifier keys (ALT, CTRL, SHIFT and so on).

See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState for modifier states available.

Notice that this change should be done in a non-API breaking way, for example by passing { modifier: KeyEvent.DOM_VK_ALT } as the fourth parameter to the SimulateKeyEvent

Expected behavior: [What you expected to happen]

Modifier keys get applied to SimulateKeyEvents calls

Actual behavior: [What actually happened]

There's no way to apply modifier keys to Simulate

Versions

1.9

Marking this is a starter bug, but it might require some intermediate knowledge on how KeyEvents work in Chrome / etc.

[core-ai-bot]

Comment by haslam22
Saturday Oct 29, 2016 at 16:13 GMT

---

Am I right in thinking we need to pass the modifier arguments to these two methods?

event.initKeyboardEvent(typeArg, canBubbleArg, cancelableArg,
                           viewArg, charArg, keyArg,
                           locationArg, modifiersListArg, repeat)

event.initKeyEvent (type, bubbles, cancelable, viewArg, 
                    ctrlKeyArg, altKeyArg, shiftKeyArg, metaKeyArg, 
                    keyCodeArg, charCodeArg) 

So perhaps the fourth parameter could be a modifiers list, such as: modifiers : [ "Control", "Shift", "Alt" ], and then we could pass the values in the correct format, e.g. space separated list for initKeyboardEvent, or changing the booleans for initKeyEvent by checking the list for values?

[core-ai-bot]

Comment by petetnt
Saturday Oct 29, 2016 at 19:12 GMT

---

Not sure why those are there in the first place as they are deprecated from the spec 🤔 Nor I am sure if we could require all those hacks anymore either.

IMHO it could just use KeyboardEvent constructor and the last parameter could/should just be an object containing all the values acccepted by the KeyboardEventInit dictionary. Then we could just Object.assign the keycode and the event object together and keep the backwards compatibility.

[core-ai-bot]

Comment by haslam22
Monday Oct 31, 2016 at 15:30 GMT

---

I think the hacks are still required, for some reason it's still impossible to pass keyCode, which, and charCode properties into the KeyboardEvent.

Here's the method updated to use the new KeyboardEvent constructor like you suggested, having the fourth argument be a KeyboardEventInit dictionary:

    /**
     * Simulate key event. Found this code here:
     * http://stackoverflow.com/questions/10455626/keydown-simulation-in-chrome-fires-normally-but-not-the-correct-key
     *
     * TODO: need parameter(s) for modifier keys
     *
     *`@`param {Number} key Key code
     *`@`param (String) event Key event to simulate
     *`@`param {HTMLElement} element Element to receive event
     *`@`param {KeyboardEventInit} args Optional arguments for key event
     */
    function simulateKeyEvent(key, event, element, args) {

        var doc = element.ownerDocument;

        if(typeof args === 'undefined') {
            args = { 
                view: doc.defaultView,
                keyIdentifier: key,
                bubbles: true,
                cancelable: true
            }
        } else {
            args.view = doc.defaultView;
            args.keyIdentifier = key;
            args.bubbles = true;
            args.cancelable = true;
        }

        var oEvent = new KeyboardEvent(event, args);

        if (event !== "keydown" && event !== "keyup" && event !== "keypress") {
            console.log("SpecRunnerUtils.simulateKeyEvent() - unsupported keyevent: " + event);
            return;
        }        

        // Chromium Hack: need to override the 'which' property.
        // Note: this code is not designed to work in IE, Safari,
        // or other browsers. Well, maybe with Firefox. YMMV.
        Object.defineProperty(oEvent, 'keyCode', {
            get: function () {
                return this.keyCodeVal;
            }
        });
        Object.defineProperty(oEvent, 'which', {
            get: function () {
                return this.keyCodeVal;
            }
        });
        Object.defineProperty(oEvent, 'charCode', {
            get: function () {
                return this.keyCodeVal;
            }
        });

        oEvent.keyCodeVal = key;
        if (oEvent.keyCode !== key) {
            console.log("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")");
        }

        element.dispatchEvent(oEvent);
    }

I've run the unit/integration tests and it seems to be all OK. Any thoughts, or should I create a pull request?

[core-ai-bot]

Comment by petetnt
Monday Oct 31, 2016 at 17:36 GMT

---

Sure, open a PR and we can work forward from there 👍

[core-ai-bot]

Comment by petetnt
Friday Dec 23, 2016 at 15:08 GMT

---

Fixed in 7732d93