Disabled ValidationTextbox widgets are editable in IE 11 when Caret browsing is enabled


#1

Calling the following in IE with Caret browsing enabled will make the textbox look disabled, but the textbox can still be changed.

widget.set("disabled", true);

This is actually an issue with any input html tag in IE when Caret browsing is enabled (Hit F7 to enable or View->Caret browsing). The following html displays the issue:

<!DOCTYPE html>
<html>
<body>
    <h1>disabled</h1>
    <input type="text" value="hello world" disabled />
    <h1>disabled/readonly</h1>
    <input type="text" value="hello world" disabled readonly />
</body>
</html>

Put cursor in first textbox and the value is changed when typing without any events firing (keydown/keyup/…).

Potential workaround is to also mark disabled textboxes as readonly. Notice the second does not have the same issue.

Below is a patch to fix trident browsers that will:

  • mark an input as readonly if setting disabled
  • mark an input as not readonly if this code marked it while setting disabled
Index: _FormWidgetMixin.js
===================================================================
--- _FormWidgetMixin.js	(revision 6004)
+++ _FormWidgetMixin.js	(revision 6007)
@@ -75,6 +75,23 @@
 			// Can't use "disabled" in this.focusNode as a test because on IE, that's true for all nodes.
 			if(/^(button|input|select|textarea|optgroup|option|fieldset)$/i.test(this.focusNode.tagName)){
 				domAttr.set(this.focusNode, 'disabled', value);
+				// IE has a Caret Browsing mode (hit F7 to activate) where disabled textboxes can be modified
+				// textboxes marked readonly avoid this issue.
+				// If setting widget disabled and widget is not already readonly, also set readonly.
+				// If setting widget enabled, and this code set readonly, set to non-readonly
+				if (has("trident")) {
+					if (value) {
+						if (domAttr.get(this.focusNode, 'readonly') === false) {
+							domAttr.set(this.focusNode, 'readonly', true);
+							this._disabledSetReadonly = true;
+						}
+					} else {
+						if (this._disabledSetReadonly) {
+							domAttr.set(this.focusNode, 'readonly', false);
+							this._disabledSetReadonly = false;
+						}
+					}
+				}
 			}else{
 				this.focusNode.setAttribute("aria-disabled", value ? "true" : "false");
 			}


Bugs.dojotoolkit.org thinks my ticket is spam
#2

Interesting, and looks like a reasonable fix. Would you be interested in providing this as a pull request per the contribution guidelines and then I can get this reviewed and landed in Dijit?

Thanks,
-Dylan