Autocomplete does not recognize contenteditable on chromium browsers
|Reported by:||shokkobon||Owned by:|
If we add autocomplete to a hidden element that has contenteditable attribute set in chromium browsers autocomplete will not recognize that the element has contenteditable attribute enabled. This will cause buggy behaviour such as html content being replaced with text value.
I've tested the bug in:
- Chrome Version 48.0.2564.109 m
OS: Win 8.1
I've tested with:
- jquery.js 1.12.0 & jquery-ui.js 1.11.4
- jquery.js 2.2.0 & jquery-ui.js 1.11.4
The is the relevant chrome issue:
This is a jsbin where you can see the issue:
- jquery 1.12.0 https://jsbin.com/rinilasupu/1/edit?html,js,output
- jquery 2.2.0 https://jsbin.com/hebipeqozo/edit?html,js,output
- use chrome
- click 'toggle'
- write 'He' in div that appears
- once dropdown appears press 'UP' key three times (so focus goes back to contenteditable element)
- observe caret moved to the beggining of element (element's content has been replaced)
The problem is that this code fails:
line 85 of autocomplete.js
this.isMultiLine = isTextarea || !isInput && this.element.prop( "isContentEditable" );
The chromium bug 313082 will result in this.element.prop( "isContentEditable" ) to return false for hidden elements with contenteditable attribute set.
A possible solution is to change that line to:
this.isMultiLine = isTextarea || !isInput && (this.element.prop( "contentEditable" ) === "true");
as this check will return "true" correctly even in chromium browsers.
This is the proposed change:
I did not make the PR as I'm unsure of the code quality and the procedure for PR's with jquery ui.