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

zul.tab.Tab widget _bind cause wrong selection if after-mount is triggered after another selection

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 8.0.3
    • 8.0.2
    • None
    • Security Level: Jimmy
    • None

      steps to reproduce

      http://zkfiddle.org/sample/354ouan/1-TabboxBindLifecycleBug
      run fiddle
      click on the button

      actual result

      Server side commands are executed in order:
      -set image on tab1
      -set selected tab as tab2

      on server side, tabbox.getSelectedTab is tab2
      on client side Tab1 is selected

      expected result

      Server side commands are executed in order:
      -set image on tab1
      -set selected tab as tab2

      on server side, tabbox.getSelectedTab is tab2
      on client side Tab2 should be selected

      debug info

      Cause: The first time a AU cmd triggers a Tab._bind, a zk.aftermount listener is registered.
      Everytime a aftermount is triggered, the selection state at the time of the initial _bind, if the Tab.isSelected() was true during _bind, it will be set as selected by _sel() regardless of its current selection state, even if it was changed by another cmd

      root cause

      https://github.com/zkoss/zk/blob/8d4561145acd5f950a3adaac900c7b26ce461b37/zul/src/archive/web/js/zul/tab/Tab.js#L257
      https://github.com/zkoss/zk/blob/8d4561145acd5f950a3adaac900c7b26ce461b37/zul/src/archive/web/js/zul/tab/Tab.js#L266

      Workaround

      zk.afterLoad('zul.tab', function() {
          var _xtab = {};
          zk.override(zul.tab.Tab.prototype, _xtab, {
      		bind_: function (desktop, skipper, after) {
      			this.$supers(zul.tab.Tab, 'bind_', arguments);
      			var closebtn = this.isClosable() ? this.$n('cls') : null,
      				tab = this;
      			if (closebtn) {
      				this.domListen_(closebtn, 'onClick', '_doCloseClick');
      			}
      			if (tab.isSelected()) {
      				zk.afterMount(function () {
      					if (tab.desktop && tab.getTabbox().inAccordionMold()) {
      						var panel = tab.getLinkedPanel(),
      							cave = panel ? panel.$n('cave') : null;
      						if (cave && cave.style.display == 'none')
      							panel._sel(true, true);
      					}
      					if (tab.isSelected()) {
      						tab._sel(false, true);
      					}
      				});
      			}
      
      			if (this.getHeight())
      				this._calcHgh();
      
      			this.parent._shallCheck = true;
      		}
          });
      });
      

            wenninghsu wenninghsu
            MDuchemin MDuchemin
            Votes:
            1 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 hours
                2h