# Clear combobox list on select

AnkitIan
101 1

Hi My code is as follows:

<vbox>
<combobox id="supervisors"
placeholder="${ b:l('str.workload.user_supervisor') }" model="@load(vm.supervisors)" autodrop="true" selectedItem="@bind(vm.selectedSupervisor)" onSelect="@command('showSupervisorUsers')" visible="@load(vm.callCenterManager)"> <template name="model" var="user"> <comboitem label="@load(user.name)" /> </template> </combobox> <listbox id="listbox_supervisorUsers" selectedItems="@bind(vm.selectedSupervisorUser)" rows="4" multiple="true" width="300px" height="300px" model="@load(vm.supervisorUsers)" checkmark="true"> <template name="model" var="user"> <listitem label="@load(user.name)"/> </template> </listbox> </vbox> <vbox vflex="1" pack="middle"> <button label=">" onClick="@command('addUsersToUserGroup')"/> <button label="<" onClick="@command('removeUsersFromUserGroup')"/> </vbox> <vbox> <combobox id="listbox_userGroups" placeholder="${ b:l('str.workload.user_group') }"
onSelect="@command('showUserGroupUsers')" >
<template name="model" var="userGroup" id="listbox_userGroups_items">
</template>
</combobox>
<listbox id="listbox_groupUsers" rows="4" multiple="true" width="300px" height="300px" model="@load(vm.groupUsers)" selectedItems="@bind(vm.selectedUser)" checkmark="true">
<template name="model" var="user">
</template>
</listbox>
</vbox>


When i click on first combobox then the information is displayed on other combobox but when i select again the first combobox the text inside the 2nd combobox does not get empty I want to empty the second combobox so that when a user clicks on a different item in the first combobox the text inside the second combobox is set to empty

delete retag edit

Sort by » oldest newest most voted

MDuchemin
2295 1 6

Hey there

Even though it is often used as a selection tool, combobox is actually a textbox with autocomplete.

The main field of textbox is "value" (the text value of the field), and that value doesn't need to be matching an entry from the model to be exist in the text input.

As a result, if you want to erase the value of the combobox, you need to bind the value="@load(vm.someStringValue)" and notify change on that value object (with the value itself being null or blank string).

If you only care about selecting a value from a list of values, with filtering: Check-out selectbox (EE): https://www.zkoss.org/wiki/ZKComponentReference/Input/Searchbox

@MDuchemin I am relatively new to zk can you please elaborate

( 2022-12-19 17:40:32 +0800 )edit

MDuchemin
2295 1 6

Sure.

A ZK page is a structure of components. In your case, you are using a vbox, which contains a combobox, etc.

All of these objects have attributes which are used to control them.

If you consider a very simple component, like "textbox", there is one main attribute that'd you need to worry about: the value attribute. This attribute is used to control or read the text value of the textbox.

The textbox also have other attributes, like "placeholder", "multiline" or "type" which control how the textbox behaves or is rendered, but from a purely functional "type value, get value" type of situation, you'd want to use the "value" attribute.

Regarding combobox: Combobox is a textbox with extra features. One of the extra feature is the drop-down menu, which is intended to give value suggestion to the combobox. You can find the currently selected item (if any) or set an item as selected, or change the content of the drop-down. However, since combobox is not a dedicated "select" component, removing the drop-down values will not automatically remove the text value from the control. This is because the text value is not dependent on the drop-down. A user may type any value they want, even if the value is not a choice in the drop-down. From the combobox point of view, the most authoritative state is the text value of the input.

Now, the question is, do you need a control that provides "selection with search" or "text input with autocomplete"

If you want selection with search, I recommend you have a look to searchbox, selectbox, or bandbox, which can be used to make a "search and select" control. (searchbox is built for this purpose, selectbox and bandbox need additional controls such as a search field created manually, etc.)

If you want to use combobox, and you want to clear the text value, you'll need to add a binding to the value attribute:

<combobox [other="" attributes]="" value="@load(...)"/> and you will need to trigger this binding in your viewModel when you want to update the text value of the component. As mentioned above, the text value is not tied to the model value, so it needs to be updated separately on this specific component.

[hide preview]