-
Notifications
You must be signed in to change notification settings - Fork 669
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
TextInput event is not raised on typing (#closes 1956) (#2303)
* [WIP] process TextInput event on typing (closes #1956) * fix textInput dispatch in safari * fix textInput dispatch in safari * fix review remarks * fix user agent module
- Loading branch information
1 parent
ef9b89e
commit b3bb34c
Showing
6 changed files
with
323 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 100 additions & 0 deletions
100
test/functional/fixtures/regression/gh-1956/pages/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| <html> | ||
| <head><title>Edit test</title></head> | ||
| <style> | ||
| h2 { | ||
| margin-top: 20px; | ||
| } | ||
| div { | ||
| border: 1px solid black; | ||
| min-height: 10px; | ||
| } | ||
| </style> | ||
| <body> | ||
| <h2>Prevent Input event on TextInput when type to input element</h2> | ||
| <pre> | ||
| Chrome/Edge. Typing is prevented and Input event is not raised | ||
| IE11/Firefox. Typing is not prevented. Input event is raised | ||
| </pre> | ||
| <input id="simpleInput" /> | ||
| <h2>Prevent Input event and typing on simple ContentEditable div</h2> | ||
| <pre> | ||
| Chrome/Edge. Typing is prevented. Input event is not raised | ||
| IE11/Firefox. Typing is not prevented. | ||
| Input event is raised in firefox but is not raised in IE11 - it's a IE11 bug | ||
| </pre> | ||
| <div contenteditable="true" id="simpleContentEditable"></div> | ||
| <h2>Prevent Input event on TextInput event when type to element node</h2> | ||
| <pre> | ||
| Not for IE11 because preventDefault will not prevent typing | ||
| Not for Firefox because Firefox does not support TextInput event | ||
| </pre> | ||
| <div contenteditable="true" id="contentEditableWithElementNode"><p><br/></p></div> | ||
| <h2>Modify text node of ContentEditable div on TextInput event and prevent Input event</h2> | ||
| <pre> | ||
| Not for IE11 because is's not possible to prevent typing in IE11 | ||
| Not for Firefox because Firefox does not support TextInput event | ||
| </pre> | ||
| <div contenteditable="true" id="contentEditableWithModify"><p>A</p></div> | ||
| <h2>Type to ContentEditable div when selected node was replaced on TextInput event</h2> | ||
| <pre> | ||
| Not for IE11 because this test emulates behavior from https://github.com/DevExpress/testcafe/issues/1956. | ||
| This behavior is different in IE11 | ||
| Not for Firefox because Firefox does not support TextInput event | ||
| </pre> | ||
| <div contenteditable="true" id="contentEditableWithReplace"><p>B</p></div> | ||
| </body> | ||
| <script type="text/javascript"> | ||
| var contentEditableWithModifyEl = document.getElementById('contentEditableWithModify'); | ||
| var contentEditableWithReplaceEl = document.getElementById('contentEditableWithReplace'); | ||
|
|
||
| function onTextInput (event) { | ||
| var needPreventDefault = true; | ||
|
|
||
| if (isTargetElement(event.target, contentEditableWithModifyEl)) | ||
| changeNodeValueOnTextInput(event); | ||
|
|
||
| if (isTargetElement(event.target, contentEditableWithReplaceEl)) { | ||
| replaceEditableElementOnTextInput(event); | ||
|
|
||
| needPreventDefault = false; | ||
| } | ||
|
|
||
| if(needPreventDefault) | ||
| event.preventDefault(); | ||
| } | ||
|
|
||
| function changeNodeValueOnTextInput(event) { | ||
| contentEditableWithModifyEl.childNodes[0].childNodes[0].nodeValue += event.data; | ||
| } | ||
|
|
||
| function replaceEditableElementOnTextInput (event) { | ||
| if (window.preventNextElementReplacement) | ||
| return; | ||
|
|
||
| window.preventNextElementReplacement = true; | ||
|
|
||
| var paragraph = contentEditableWithReplaceEl.childNodes[0]; | ||
| var textNode = paragraph.childNodes[0]; | ||
| var newParagraph = document.createElement("P"); | ||
|
|
||
| newParagraph.innerHTML = 'X'; | ||
|
|
||
| contentEditableWithReplaceEl.removeChild(paragraph); | ||
| contentEditableWithReplaceEl.appendChild(newParagraph); | ||
| newParagraph.focus(); | ||
| } | ||
|
|
||
| function onInput (event) { | ||
| if (!isTargetElement(event.target, contentEditableWithReplaceEl)) | ||
| throw new Error('Input event has raised'); | ||
| } | ||
|
|
||
| function isTargetElement(actualTarget, expectedTarget) { | ||
| return expectedTarget.contains(actualTarget); | ||
| } | ||
|
|
||
| document.addEventListener('textInput', onTextInput, true); | ||
| document.addEventListener('textinput', onTextInput, true); | ||
| document.addEventListener('input', onInput, true); | ||
| </script> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| var expect = require('chai').expect; | ||
|
|
||
| var browsersWithLimitations = [ 'ie', 'firefox', 'firefox-osx' ]; | ||
|
|
||
| describe('Should support TextInput event[Regression](GH-1956)', function () { | ||
| it('Prevent Input event on TextInput when type to input element', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Prevent Input event on TextInput when type to input element', | ||
| { skip: browsersWithLimitations }); | ||
| }); | ||
|
|
||
| it('Prevent Input event on TextInput when type to input element IE11/Firefox', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Prevent Input event on TextInput when type to input element IE11/Firefox', | ||
| { only: [ 'ie', 'firefox', 'firefox-osx' ], shouldFail: true }) | ||
| .catch(function (errs) { | ||
| var errors = [ errs['ie'], errs['firefox'] ].filter(err => err); | ||
|
|
||
| errors.forEach(err => { | ||
| expect(err[0]).contains('Input event has raised'); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('Prevent Input event on TextInput when type to ContentEditable div', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Prevent Input event on TextInput when type to ContentEditable div', | ||
| { skip: browsersWithLimitations }); | ||
| }); | ||
|
|
||
| it('Prevent Input event on TextInput when type to ContentEditable div IE11', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Prevent Input event on TextInput when type to ContentEditable div IE11/Firefox', | ||
| { only: [ 'ie' ] }); | ||
| }); | ||
|
|
||
| it('Prevent Input event on TextInput when type to ContentEditable div Firefox', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Prevent Input event on TextInput when type to ContentEditable div IE11/Firefox', | ||
| { only: [ 'firefox', 'firefox-osx' ], shouldFail: true }) | ||
| .catch(function (errs) { | ||
| expect(errs[0]).contains('Input event has raised'); | ||
| }); | ||
| }); | ||
|
|
||
| it('Modify text node of ContentEditable div on TextInput event and prevent Input event', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Modify text node of ContentEditable div on TextInput event and prevent Input event', | ||
| { skip: browsersWithLimitations }); | ||
| }); | ||
|
|
||
| it('Type to ContentEditable div when selected node was replaced on TextInput event', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Type to ContentEditable div when selected node was replaced on TextInput event', | ||
| { skip: browsersWithLimitations }); | ||
| }); | ||
|
|
||
| it('Prevent Input event on TextInput when type to element node', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Prevent Input event on TextInput when type to element node', | ||
| { skip: browsersWithLimitations }); | ||
| }); | ||
| }); |
Oops, something went wrong.