diff --git a/src/lib/@types/index.d.ts b/src/lib/@types/index.d.ts index 9e8b30ab..d743d1a4 100644 --- a/src/lib/@types/index.d.ts +++ b/src/lib/@types/index.d.ts @@ -91,12 +91,22 @@ declare module 'simple-keyboard' { * Calling preventDefault for the mousedown events keeps the focus on the input. */ preventMouseDownDefault?: boolean; + + /** + * Calling preventDefault for the mouseup events. + */ + preventMouseUpDefault?: boolean; /** * Stops pointer down events on simple-keyboard buttons from bubbling to parent elements. */ stopMouseDownPropagation?: boolean; + /** + * Stops pointer up events on simple-keyboard buttons from bubbling to parent elements. + */ + stopMouseUpPropagation?: boolean; + /** * Define the text color that the physical keyboard highlighted key should have. */ diff --git a/src/lib/components/Keyboard.js b/src/lib/components/Keyboard.js index 73308852..aa5ce060 100644 --- a/src/lib/components/Keyboard.js +++ b/src/lib/components/Keyboard.js @@ -65,7 +65,9 @@ class SimpleKeyboard { * @property {boolean} syncInstanceInputs When set to true, this option synchronizes the internal input of every simple-keyboard instance. * @property {boolean} physicalKeyboardHighlight Enable highlighting of keys pressed on physical keyboard. * @property {boolean} preventMouseDownDefault Calling preventDefault for the mousedown events keeps the focus on the input. + * @property {boolean} preventMouseUpDefault Calling preventDefault for the mouseup events. * @property {boolean} stopMouseDownPropagation Stops pointer down events on simple-keyboard buttons from bubbling to parent elements. + * @property {boolean} stopMouseUpPropagation Stops pointer up events on simple-keyboard buttons from bubbling to parent elements. * @property {string} physicalKeyboardHighlightTextColor Define the text color that the physical keyboard highlighted key should have. * @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have. * @property {function(button: string):string} onKeyPress Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”). @@ -379,7 +381,15 @@ class SimpleKeyboard { /** * Handles button mouseup */ - handleButtonMouseUp(button) { + handleButtonMouseUp(button = null, e = null) { + if (e) { + /** + * Handle event options + */ + if (this.options.preventMouseUpDefault) e.preventDefault(); + if (this.options.stopMouseUpPropagation) e.stopPropagation(); + } + /** * Remove active class */ @@ -1396,11 +1406,11 @@ class SimpleKeyboard { this.handleButtonClicked(button); this.handleButtonMouseDown(button, e); }; - buttonDOM.onpointerup = () => { - this.handleButtonMouseUp(button); + buttonDOM.onpointerup = e => { + this.handleButtonMouseUp(button, e); }; - buttonDOM.onpointercancel = () => { - this.handleButtonMouseUp(button); + buttonDOM.onpointercancel = e => { + this.handleButtonMouseUp(button, e); }; } else { /** @@ -1414,11 +1424,11 @@ class SimpleKeyboard { this.handleButtonClicked(button); this.handleButtonMouseDown(button, e); }; - buttonDOM.ontouchend = () => { - this.handleButtonMouseUp(button); + buttonDOM.ontouchend = e => { + this.handleButtonMouseUp(button, e); }; - buttonDOM.ontouchcancel = () => { - this.handleButtonMouseUp(button); + buttonDOM.ontouchcancel = e => { + this.handleButtonMouseUp(button, e); }; } else { /** @@ -1431,8 +1441,8 @@ class SimpleKeyboard { buttonDOM.onmousedown = e => { this.handleButtonMouseDown(button, e); }; - buttonDOM.onmouseup = () => { - this.handleButtonMouseUp(button); + buttonDOM.onmouseup = e => { + this.handleButtonMouseUp(button, e); }; } } diff --git a/src/lib/components/tests/Keyboard.test.js b/src/lib/components/tests/Keyboard.test.js index 064f0504..cabf44de 100644 --- a/src/lib/components/tests/Keyboard.test.js +++ b/src/lib/components/tests/Keyboard.test.js @@ -929,14 +929,23 @@ it('Keyboard handleButtonMouseDown will work', () => { it('Keyboard handleButtonMouseDown will work with preventMouseDownDefault', () => { setDOM(); - const keyboard = new Keyboard(); + const keyboard = new Keyboard({ + preventMouseDownDefault: true, + stopMouseDownPropagation: true + }); + let called = false; + let called2 = false; keyboard.options.preventMouseDownDefault = true; keyboard.handleButtonMouseDown("q", { target: keyboard.getButtonElement("q"), - preventDefault: () => {}, - stopPropagation: () => {} + preventDefault: () => { + called = true; + }, + stopPropagation: () => { + called2 = true; + } }); keyboard.getButtonElement("q").onclick(); @@ -944,6 +953,37 @@ it('Keyboard handleButtonMouseDown will work with preventMouseDownDefault', () = target: document.body }); + expect(called).toBe(true); + expect(called2).toBe(true); +}); + +it('Keyboard handleButtonMouseUp will work with preventMouseUpDefault and stopMouseUpPropagation', () => { + setDOM(); + + const keyboard = new Keyboard({ + preventMouseUpDefault: true, + stopMouseUpPropagation: true + }); + let called = false; + let called2 = false; + + keyboard.handleButtonMouseUp("q", { + target: keyboard.getButtonElement("q"), + preventDefault: () => { + called = true + }, + stopPropagation: () => { + called2 = true; + } + }); + + keyboard.getButtonElement("q").onclick(); + document.onmouseup({ + target: document.body + }); + + expect(called).toBe(true); + expect(called2).toBe(true); }); it('Keyboard onModulesLoaded will work', () => {