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

za11y navigation in listbox/tree intercept events in input-based components, cause lost focus

XMLWordPrintable

      Steps to Reproduce

      Run fiddle

      https://zkfiddle.org/sample/hn91qh/3-listbox-za11y-event-catch

       

      Type a value in any input components in first listbox

      Use the left arrow to move the caret at a different position inside of the input element.

      Current Result

      focus is removed from the edited input

      focus is added to the navigation anchor based on the parent listcell

      Expected Result

      while editing an input-based widget, directional arrows should be used for caret position inside the widget

      Debug Information

      starts from zA11y listcell doKeyDown_ override

      triggers visibleSibling._focusContent()

      Workaround

      Prevent event propagation at inputWidget level:

       

      	<script><![CDATA[ 
      	zk.afterLoad("zul.inp", function () {
      	    var _xInputWidget = {};
      	    zk.override(zul.inp.InputWidget.prototype, _xInputWidget, {
      	        doKeyDown_: function (evt, simulated) {
      	        	var key = evt.key;
      				switch (key) {
      					case 'ArrowLeft':
      					case 'ArrowRight':
      					case 'ArrowUp':
      					case 'ArrowDown':
      						evt.stop({propagation:true});
      						break;
      				}
      				var result = _xInputWidget.doKeyDown_.apply(this, arguments);
      				return result;
      	        }
      	     });
      	});
      ]]></script>
      

            DevChu DevChu
            MDuchemin MDuchemin
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: