ZK Combobox keeps pop-up menu open when dynamic content is loaded

This article explores the issue where ZK Combobox automatically closes when content is loaded dynamically, such as the "Show More" option, and provides a solution to prevent it from closing by overriding the doClick_() method of the client JavaScript Widget. Through this method, developers can precisely control Combobox's closing behavior and achieve more flexible user interaction, especially for scenarios where the list needs to be updated dynamically according to user selection but do not want the pop-up menu to close immediately.

ZK Combobox Dynamic Content Loading and Popup Menu Control

Combobox component in ZK Framework By default, the drop-down pop-up menu will automatically close when the user selects any item in the list. This behavior is reasonable for most single-choice scenarios, but in certain specific interactive modes, such as when a user clicks on a "Show More" option to dynamically load or switch list content, automatic closing can lead to a poor user experience because the user needs to reopen Combobox to see the updated list. This article will introduce in detail how to solve this problem through client Widget customization, so that Combobox remains open after clicking on a specific project and updates its model dynamically.

Problem analysis

When Combobox is used to implement segmented loading or toggling list views (for example, a short list with the "Show More" option, clicking to switch to the full list), its default behavior can create challenges. Combobox will be closed immediately after the user clicks on the "Show More" option, and then the user will not be able to see the full list immediately even if the backend model has been updated. You must click Combobox again to open again. This is obviously not an ideal user experience.

Many behaviors of ZK components are controlled by their corresponding client JavaScript Widget. The closing logic when a Comboitem is clicked is triggered by the doClick_() method of its client Widget. Therefore, to change this behavior, we need to customize the method.

Solution: Client Widget Customization

The core of solving this problem is to override the doClick_() method of the Comboitem client Widget. Through the zk.override mechanism, we can inject custom logic to control the shutdown behavior of Combobox without modifying the ZK core library.

1. ZUL page and ZScript logic

First, we need to define Combobox in the ZUL page and prepare different data models. At the same time, listen to user selections through the onSelect event to handle model switching on the server side.

 <zscript></zscript>

<combobox id="box" model="${model1}" readonly onselect="loadAll()"></combobox>
<script src="comboitem-doclick.js"></script>

<zscript></zscript>

Code description:

• fullModel and model1 represent the full list and the short list, respectively. An additional "Show More" string is added in model1 as a special option.
• The combobox component binds model1 as the initial model and sets readonly="true" to prevent users from entering at will.
• onSelect="loadAll()" delegates the selection event to the loadAll method in ZScript.
• The loadAll() method is responsible for determining that if the user selects "Show More", switches the combobox model to fullModel and clears the current displayed value of combobox.
• is the key to introducing our custom JavaScript files.

2. Client JavaScript customization

Create a comboitem-doclick.js file and place it in the path accessible to the ZUL page. This file will contain logic overriding the Comboitem default doClick_() method.

 /**
 * File name: comboitem-doclick.js
 * Purpose: Keep the Combobox pop-up menu open when the user selects a specific item (such as "Show More").
 * Based on ZK version: 9.6.3 (Please verify and adjust according to the actual ZK version used)
 */
zk.afterLoad('zul.inp', function() {
    var exWidget = {}; // is used to store the original method, although in this example we do not call the original method zk.override(zul.inp.Comboitem.prototype, exWidget, {
        /**
         * Override the doClick_ method of Comboitem to control the shutdown behavior of Combobox.
         * @param {zk.Event} evt Click event object*/
        doClick_: function doClick_(evt) {
            // If Comboitem is not disabled if (!this._disabled) {
                var cb = this.parent; // Get the parent Combobox component// Call the _select method of Combobox to handle the logic of selecting items// sendOnSelect: true means triggering the onSelect event// sendOnChange: true means triggering the onChange event cb._select(this, {
                  sendOnSelect: true,
                  sendOnChange: true
                });

                // Pictures that update the hover status (if any)
                this._updateHoverImage();

                // Core logic: Decide whether to close Combobox based on the selected label
                // If the selected label is not 'Show more', close Combobox
                if (this.getLabel() != 'Show more'){
                    cb.close({
                      sendOnOpen: true, // Send onOpen event when closed (if required)
                      focus: true // Set the focus back to the Combobox input box after closing});
                }

                // Tagging Combobox should be turned off (although we control the shutdown here, keep this line for compatibility with ZK internal logic)
                cb._shallClose = true;
                // If the current focus should be retained on this component, set the focus back to the input node of Combobox if (zul.inp.InputCtrl.isPreservedFocus(this)) zk(cb.getInputNode()).focus();
                // Block the default behavior and bubbling of events, preventing repeated processing of evt.stop();
            }
        },
    });
});

Code description:

• zk.afterLoad('zul.inp', ...): Make sure to execute our custom code after the zul.inp module is loaded, because Comboitem is defined in that module.
• zk.override(zul.inp.Comboitem.prototype, exWidget, {...}): This is the core API customized by ZK client Widget. It allows us to override the method on the zul.inp.Comboitem prototype chain.
• doClick_ method:
  • cb._select(this, {sendOnSelect: true, sendOnChange: true}): This line of code ensures that the normal selection logic of Combobox is executed, including triggering the onSelect and onChange events on the server side.
  • if (this.getLabel() != 'Show more') { cb.close(...) }: This is the key conditional judgment. We call the cb.close() method to close the Combobox popup menu only when the selected Comboitem tag is not "Show more". If the tag is "Show More", skip cb.close() to keep the pop-up menu open.
  • evt.stop(): prevents further propagation of events and prevents default behavior from being executed, which is very important to ensure that our custom logic takes effect.

Notes and best practices

1. ZK Version Compatibility: The internal implementation of the client Widget may vary between different ZK versions. The above code is based on ZK version 9.6.3 and may require fine-tuning according to the ZK client API documentation if you are using another version. It is recommended to retest and verify the custom code after upgrading the ZK version.
2. Label Matching: In JavaScript code, we use this.getLabel() != 'Show More' to determine whether to prevent closing. This means that "Show More" the string must be exactly the same as the string added to model1 in ZScript. If your Show More option is a Comboitem object, you may need to tell by other properties such as getValue() or custom properties.
3. Dynamic model update: In the loadAll() method, box.setModel(fullModel) triggers Combobox to re-render its list. Since we prevented Combobox from shutting down, users will immediately see the updated full list.
4. User Experience: This customization can significantly improve the user experience and avoid unnecessary interactive steps. But also make sure that the user is aware of the role of the Show More option and the fact that the list has been updated.
5. The difference between multiple choice Combobox: The question mentions that multiple choice Combobox will not be closed. This is because the design goal of multi-select Combobox is to allow users to select multiple projects without interrupting the selection process. The doClick_() logic is essentially different from the single-select Combobox, and this solution is not directly applicable.
6. Code Organization: It is recommended to organize all client custom code into a separate .js file and reference it in the ZUL page to keep the code neat and maintainable.

Summarize

By customizing the doClick_() method of the ZK Combobox client Comboitem Widget, we can precisely control the closing behavior of its pop-up menu. This approach is especially suitable for scenarios where content needs to be loaded dynamically (such as the "Show More" option) without wanting to close the pop-up menu immediately. Mastering ZK's client Widget customization capabilities can help developers achieve more complex and more in line with user needs, thereby building more powerful and flexible web applications.

The above is the detailed content of ZK Combobox keeps pop-up menu open when dynamic content is loaded. For more information, please follow other related articles on the PHP Chinese website!