ZK Combobox disable closing

Question

I'm struggling with ZK Framework Combobox UI rendering. I have a combobox with 2 logical lists (1 is a short version of 2, with "Show more" option, and 2 is a list with all entries and no "Show more" option). I've done some list swapping logic tracked by onClick event of "Show more" option. And when I click this option combobox closes and than I need to re-open it to see the full list. So my question is do anyone know a way how to keep combobox opened when I click this specific option (and furthermore, dynamically populate model by another list)? Maybe there are any other best practices of how to do the task more efficiently? Thanks everyone for help

I have a thought about combobox that enables multiple choice — it doesn't close when some option is clicked, but I haven't found any related information. Maybe you could make your suggestions about it

Answer 1

The behavior you want "clicking 'show more' and keep the popup open" is not supported by default. So you have to override its js widget's doClick_(), please read https://www.zkoss.org/wiki/ZK_Client-side_Reference/General_Control/Widget_Customization

here is an example.

<zscript><![CDATA[
ListModelList fullModel = new ListModelList(Locale.getAvailableLocales());
ListModelList model1 = new ListModelList(fullModel.subList(0, 2));
model1.add("show more");

    ]]></zscript>
<combobox id="box" model="${model1}" readonly="true" onSelect="loadAll()"/>
<script src="comboitem-doclick.js"/>
    <zscript><![CDATA[
    public void loadAll(){
        if (model1.getSelection().iterator().next().equals("show more")){
            box.setModel(fullModel);
            box.setValue("");
        }
    }
    ]]></zscript>

/**
 * Purpose: when a user selects a specific item, keep the popup open.
 * Based on version: 9.6.3
 */
zk.afterLoad('zul.inp', function() {
    var exWidget = {};
    zk.override(zul.inp.Comboitem.prototype, exWidget, {
        doClick_: function doClick_(evt) {
            if (!this._disabled) {
                var cb = this.parent;

                cb._select(this, {
                  sendOnSelect: true,
                  sendOnChange: true
                });

                this._updateHoverImage();
                if (this.getLabel() != 'show more'){
                    cb.close({
                      sendOnOpen: true,
                      focus: true
                    }); // Fixed the onFocus event is triggered too late in IE.
                }

                cb._shallClose = true;
                if (zul.inp.InputCtrl.isPreservedFocus(this)) zk(cb.getInputNode()).focus();
                evt.stop();
            }
        },
    });
});