Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-3237

IE 11 input readonly require focus-out before accepting edit

    Details

    • Type: New Feature
    • Status: Closed
    • Priority: Normal
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 8.0.3
    • Component/s: None
    • Security Level: Jimmy
    • Labels:
      None
    • gh.sprint.customfield.default.name:
      ZK 8.0.3 S4

      Description

      IE 11 input with readonly require focus-out before accepting edit, if the focus is on the input element when readonly is removed.

      Reproduced without ZK:

      <html>
      	<input id="testtxtbx" style="background-color:red;" type="textbox" value="test"/>
      	<script>
      		var a = document.getElementById('testtxtbx')
      		a.readOnly = true;
      		setTimeout(function(){
      			a.readOnly = false;
      			a.style.backgroundColor='green';
      		},3000)
      	</script>
      </html>
      

      workaround :

      	<script><![CDATA[
      		// IE Workaround
      		zk.afterLoad('zul.inp', function() {
      		    var _xInputWidget = {};
      		    zk.override(zul.inp.InputWidget.prototype, _xInputWidget, {
      		    	setReadonly: function (value) {
      					_xInputWidget.setReadonly.apply(this,arguments);
      		    		var self = this;
      		    		if(document.activeElement == this.$n()){
      		    			this.$n().setSelectionRange(0, this.$n().value.length);
      		    		}
      		    	}
      		    });
      		});
      	]]></script>
      

      ZK example:
      select the combobox,
      type a letter, then immediately hit tab to select the textbox.
      In IE11, without the workaround : cannot update content
      Other browsers : can update

      <zk>
      	<script><![CDATA[
      		// IE Workaround ----- Remove for testing
      		zk.afterLoad('zul.inp', function() {
      		    var _xInputWidget = {};
      		    zk.override(zul.inp.InputWidget.prototype, _xInputWidget, {
      		    	setReadonly: function (value) {
      					_xInputWidget.setReadonly.apply(this,arguments);
      		    		var self = this;
      		    		if(document.activeElement == this.$n()){
      		    			this.$n().setSelectionRange(0, this.$n().value.length);
      		    		}
      		    	}
      		    });
      		});
      	]]></script>
      	<style>
      		.z-textbox:focus{
      			background-color:#00cc00;
      		}
      	</style>
      	<zscript><![CDATA[
      		class MyVm{
      			private String cmbValue = "";
      			public String getCmbValue(){
      				return cmbValue;
      			}
      			public void setCmbValue(String cmbValue){
      				this.cmbValue = cmbValue;
      			}
      		}
      	]]></zscript>
      	<window viewModel="@id('vm')@init('MyVm')">
      		<combobox instant="true" value="@bind(vm.cmbValue)" >
      			<comboitem label="a item 1"/>
      			<comboitem label="b item 2"/>
      			<comboitem label="b item 3"/>
      		</combobox>
      		<textbox readonly="@load(empty vm.cmbValue)"/>
      	</window>
      </zk>
      

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                christopherszu christopherszu
                Reporter:
                MDuchemin MDuchemin
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 hour
                  1h