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

Blur after tabbing out of non-input widget in bandpopup closes the popup

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Normal
    • Resolution: Fixed
    • Affects Version/s: 8.0.4.2
    • Fix Version/s: 8.5.2
    • Component/s: None
    • Security Level: Jimmy
    • Labels:
      None

      Description

      Steps to Reproduce

      http://zkfiddle.org/sample/10afek6/1-Bandbox-close-on-non-input-tab-out
      run fiddle
      Open the bandbox
      Click to put focus in 1st child of bandpopup
      Use tab key to focus checkbox
      Use tab again

      Current Result

      When pressing tab key on checkbox in bandpopup, the bandbox closes

      Expected Result

      When pressing tab key on checkbox in bandpopup, bandbox should not close and next child should receive focus.

      Debug Info

      https://github.com/zkoss/zk/blob/v8.0.4.2/zul/src/archive/web/js/zul/inp/ComboWidget.js#L546

      Root Cause

      Bandbox doesn't close on tab pressed in inputwidget, but the rule doesn't prevent closing when tabbing out of any focusable widget not instance of inputwidget

      Workaround

      Based on 8.0.4.2

      	<script><![CDATA[
      	zk.afterLoad('zul.inp', function() {
      		var xComboWidget = {};
      		zk.override(zul.inp.ComboWidget.prototype, xComboWidget ,{
      			_doKeyDown: function (evt) {
      				var keyCode = evt.keyCode,
      					bOpen = this._open;
      				if ((evt.target == this || !(evt.target.$instanceof(zul.inp.InputWidget) || evt.target.$instanceof(zul.wgt.Checkbox)))// Bug ZK-475
      						&& (keyCode == 9 || (zk.webkit && keyCode == 0))) { //TAB or SHIFT-TAB (safari)
      					if (bOpen) this.close({sendOnOpen: true});
      					return;
      				}
      	
      				if (evt.altKey && (keyCode == 38 || keyCode == 40)) {//UP/DN
      					if (bOpen) this.close({sendOnOpen: true});
      					else this.open({sendOnOpen: true});
      	
      					//FF: if we eat UP/DN, Alt+UP degenerate to Alt (select menubar)
      					var opts = {propagation: true};
      					if (zk.ie < 11) opts.dom = true;
      					evt.stop(opts);
      					return;
      				}
      	
      				//Request 1537962: better responsive
      				if (bOpen && (keyCode == 13 || keyCode == 27)) { //ENTER or ESC
      					if (keyCode == 13) this.enterPressed_(evt);
      					else this.escPressed_(evt);
      					return;
      				}
      	
      				if (keyCode == 18 || keyCode == 27 || keyCode == 13
      				|| (keyCode >= 112 && keyCode <= 123)) //ALT, ESC, Enter, Fn
      					return; //ignore it (doc will handle it)
      	
      				if (this._autodrop && !bOpen)
      					this.open({sendOnOpen: true});
      	
      				if (keyCode == 38) this.upPressed_(evt);
      				else if (keyCode == 40) this.dnPressed_(evt);
      				else this.otherPressed_(evt);
      			}
      		});//zk.override
      	});//zk.afterLoad
      	]]></script>
      

        Issue Links

          Activity

          Hide
          MDuchemin MDuchemin added a comment -

          Current workaround add tabbing for checkbox / radio
          if ((evt.target == this || !(evt.target.$instanceof(zul.inp.InputWidget) || evt.target.$instanceof(zul.wgt.Checkbox)))
          Can be modified to add tabbing for other components by adding their widget class

          Show
          MDuchemin MDuchemin added a comment - Current workaround add tabbing for checkbox / radio if ((evt.target == this || !(evt.target.$instanceof(zul.inp.InputWidget) || evt.target.$instanceof(zul.wgt.Checkbox))) Can be modified to add tabbing for other components by adding their widget class
          Hide
          Anonymous added a comment -

          Fixed since 2018/04/24

          Show
          Anonymous added a comment - Fixed since 2018/04/24

            People

            • Assignee:
              CharlesQiu CharlesQiu
              Reporter:
              MDuchemin MDuchemin
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Time Tracking

                Estimated:
                Original Estimate - 1 day
                1d
                Remaining:
                Time Spent - 2 hours Remaining Estimate - 6 hours
                6h
                Logged:
                Time Spent - 2 hours Remaining Estimate - 6 hours
                2h