Dojo

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

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");
 			}

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

I created the pull request here… Let me know if you need anything else…

https://github.com/dojo/dijit/pull/136

Please see the feedback in the PR, and then we’ll work to get this landed.