Workaround bindings to textarea.placeholder in IE #5577
Conversation
Textareas have a very weird bug in IE, where the text of the placeholder is copied to the content of the textarea when set. This a creates two bugs: 1. An unintended binding is made to the textContent of the textarea's text child node, meaning updates to the `placeholder` will be an unnecessary binding process in the best case, or an exception thrown when updating the text child node in the worst case. 2. When `legacyOptimizations` is enabled, the child node of the text area is removed when the binding for `placeholder` is processed and removed, leaving a binding to a `null` node, and throwing exceptions. Therefore, when we detect this placeholder behavior, we will remove the textnode before template processing, preventing both bugs.
|
For the second problem, this is caused because when |
lib/mixins/template-stamp.js
Outdated
| * If the placeholder is a binding, this can break template stamping in two | ||
| * ways. | ||
| * | ||
| * One issue is that when the `placeholder` binding is removed, the textnode |
There was a problem hiding this comment.
placeholder attribute is removed when the binding is processed
lib/mixins/template-stamp.js
Outdated
| * child of the textarea is deleted, and the template info tries to bind into | ||
| * that node. | ||
| * | ||
| * When `legacyOptimizations` is enabled, the node is removed from the textarea |
There was a problem hiding this comment.
When the template is stamped and the textarea.textContent binding is processed, no corresponding node is found because it was removed during parsing. An exception is generated when this binding is updated.
lib/mixins/template-stamp.js
Outdated
| * when the `placeholder` binding is processed, leaving an "undefined" cell in | ||
| * the binding metadata object. | ||
| * | ||
| * When `legacyOptimizations` is disabled, the template is cloned before |
There was a problem hiding this comment.
When legacyOptimizations is not used, the template is cloned before processing and this changes the above behavior. The cloned template also has a value property set to the placeholder and textContent. This prevents the removal of the textContent when the placeholder attribute is removed. Therefore the exception does not occur. There's an extra unnecessary binding.
|
|
||
| function hasPlaceholderBug() { | ||
| if (!placeholderBugDetect) { | ||
| const t = document.createElement('textarea'); |
There was a problem hiding this comment.
placeholderBugDetect = true
lib/mixins/template-stamp.js
Outdated
| * @param {!Node} node Check node for placeholder bug | ||
| * @return {boolean} True if placeholder is bugged | ||
| */ | ||
| function shouldFixPlaceholder(node) { |
There was a problem hiding this comment.
Suggest refactoring to fixPlaceholder and apply the fix.
Textareas have a very weird bug in IE, where the text of the placeholder
is copied to the content of the textarea when set.
This a creates two bugs:
text child node, meaning updates to the
placeholderwill be anunnecessary binding process in the best case, or an exception thrown
when updating the text child node in the worst case.
legacyOptimizationsis enabled, the child node of the textarea is removed when the binding for
placeholderis processed andremoved, leaving a binding to a
nullnode, and throwing exceptions.Therefore, when we detect this placeholder behavior, we will remove the
textnode before template processing, preventing both bugs.