fix: listen for the enter key and trigger a change to emulate change …

[DanielRuf]

IE (11) strictly follows the HTML specification and only triggers change when an input loses focus.
Other browsers and Edge also trigger it when the enter key is pressed.

https://html.spec.whatwg.org/multipage/input.html#common-input-element-events

4.10.5.5 Common event behaviors
When the input and change events apply (which is the case for all input controls other than buttons and those with the type attribute in the Hidden state), the events are fired to indicate that the user has interacted with the control. The input event fires whenever the user has modified the data of the control. The change event fires when the value is committed, if that makes sense for the control, or else when the control loses focus. In all cases, the input event comes before the corresponding change event (if any).

Also see
http://komlenic.com/231/internet-explorer-onchange-on-enter/
https://www.mediaevent.de/javascript/onchange.html
https://stackoverflow.com/questions/11415142/event-change-in-ie-not-working-when-pressing-enter-button
https://stackoverflow.com/questions/31802122/not-able-to-to-use-onchange-event-in-ie-11-using-jquery

Closes #11096

[ncoden]

This is duplicated with https://github.com/DanielRuf/foundation-sites/blob/edf6f79ff4c1ec20345990467ca3fe2e03b350ec/js/foundation.slider.js#L469

We could use a little helper on place like:

const handleChangeEvent = function(e) {
    const idx = _this.inputs.index($(this));
    _this._handleEvent(e, _this.handles.eq(idx), $(this).val());
};

this.inputs.off('keyup.zf.slider').on('keyup.zf.slider', function (e) {
    if(e.keyCode == 13) handleChangeEvent.call(this, e);
});
this.inputs.off('change.zf.slider').on('change.zf.slider', handleChangeEvent);

What do you think ?

[DanielRuf]

Good idea, pushed a new commit. Tests are fine.

[ncoden]

Not aligned ;)

(sorry)

[DanielRuf]

Done. That's why we need eslint with our own rule set.

[ncoden]

LGTM 👍. Thank you @DanielRuf