Log in to start a topic

Restrict Selection and Customize Delete Behavior in Wijmo ComboBox

Posted by: nilesh_nichal on 14 July 2025, 2:54 am EST

  • nilesh_nichal

    Posted 14 July 2025, 2:54 am EST - Updated 14 July 2025, 3:44 am EST

    Hi Team,

    We are using the Wijmo wj-combo-box component and need help implementing the following three use cases. Screenshots for each use case are attached for reference.

    Use Case 1: Read-Only Default Selection Without Cross Button

    1. The dropdown should display a default selected item (e.g., “Televisions”) as shown in Screenshot 1.

      2.This item should not be selectable again from the dropdown.

      3.It should not show a cross (delete) button in the selected box, but it can be deleted from the dropdown list.
    2. Currently, our implementation allows the user to re-select this item, which we want to prevent.

    Use Case 2: Auto-Select Next Item Without Cross Button

    1.When the default item (“Televisions”) is deleted, the next item (“Category 1”) is automatically selected — this part is working correctly in our implementation.

    2.However, as shown in Screenshot 2, we want “Category 1” to appear in the select box without a cross (delete) button once it becomes the selected item. Currently, in our implementation, “Category 1” is selected with a cross button, which we want to avoid.

    3.The dropdown list itself should still display the cross button next to items for deletion purposes — this behavior is desired and should remain unchanged.

    Use Case 3: Restrict Selection to Default Only

    1.The user should not be able to select any other item apart from the default one.

    2.As shown in Screenshot 3, “Unassigned” is selected, and the dropdown shows other options, but the user should not be able to manually select them.

    3.The dropdown should allow deletion of the default item, but not allow selecting any other item manually.

    Request:

    Could you please guide us on how to:

    1.Prevent re-selection of the default item.

    2.Ensure auto-selection of the next item without showing the cross button.

    3.Restrict manual selection to only the default item and allow deletion only.

    Any code samples from stack blitz in angular would be greatly appreciated.

    HTML Code

      <wj-combo-box #cmbCategory
                          [itemsSource]="selectedCategory"
                          [selectedValue]="selectedCategoryValue"
                          (gotFocus)="dropdownVisible = true"
                          (lostFocus)="dropdownVisible = false"
                          (selectedValueChanged)="onCategoryValueChanged($event)"
                          (selectedIndexChanged)="onCategoryChanged(cmbCategory.selectedItem)"
                          [selectedValuePath]="'id'"
                          [displayMemberPath]="'categoryName'"
                          [isDisabled]="false"
                          [isEditable]="false"
                          [isRequired]="false"
                          [dropDownCssClass]="searchType != type.New ? 'mapped-category-dropdown' : ''">

    Please find the screenshot as below

    Use case 1



    Use case 2



    Use case 3

  • vivek.pannu

    Posted 14 July 2025, 6:44 am EST

    Hi Nilesh,

    Could you please share some additional information so that we can have a better understanding of your requirements? Here are the things we want to know -

    What does the ‘X’ button in the dropdown list do? Does it remove the clicked value from the dropdown list, or does it just remove the selected value from the Combobox if that value is selected?

    It seems you are using some custom implementation to show the ‘X’ button in the dropdown list, as by default, no such button appears in the combobox dropdown list. Could you please share some code snippets of your current implementation that show your current code that adds these icons?

    As you shared 3 use cases, will you be using 3 comboboxes separately, or 2, or do you want all your requirements to be implemented in 1 combobox only?

    Use Case 1:

    As per our understanding, you want to keep the combobox read-only. You can set the readOnly property of the combobox for this purpose, the user will not be able to change the selected value after that, also the dropdown will not open after setting ‘isReadOnly’ to true. It seems there is an issue that, ‘X’ button text is appended at the end of the selected value in the input textbox, we will find a solution for that as soon as you share the code that adds the ‘X’ button in the combobox.

    Use Case 2:

    It seems it is already working fine, except the ‘X’ button issue that we explained in the above use case. It will be fixed along with use case 1.

    Use Case 3:

    As per our understanding, for the third use case, you want the user cannot select any other value, he can only delete the selected value. Please confirm.

    We have a little confusion about your requirements, it seems that fixing the ‘X’ button showing in the textbox issue and implementing the third use case should complete all your requirements. Could you please share all the required information we mentioned above?

    Regards

  • nilesh_nichal

    Posted 15 July 2025, 2:59 am EST - Updated 15 July 2025, 5:19 am EST

    Hi Team,

    We are using the wj-combo-box component in Angular and have three specific use cases we need help with. We’ve implemented custom logic to show an “X” button next to items in the dropdown list, which allows users to delete items from the list. This is not the default behavior of the component — we added it ourselves.

    HTML code

    <div [title]="categoryTooltip"
             class="dropdown-wrapper dropdown-grey-wrapper">
            <wj-combo-box #cmbCategory
                          [itemsSource]="selectedCategory"
                          [selectedValue]="selectedCategoryValue"
                          (gotFocus)="dropdownVisible = true"
                          (lostFocus)="dropdownVisible = false"
                          (selectedValueChanged)="onCategoryValueChanged($event)"
                          (selectedIndexChanged)="onCategoryChanged(cmbCategory.selectedItem)"
                          [selectedValuePath]="'id'"
                          [displayMemberPath]="'categoryName'"
                          [isDisabled]="false"
                          [isEditable]="false"
                          [isRequired]="false"
                          [dropDownCssClass]="searchType != type.New ? 'mapped-category-dropdown' : ''">
                <ng-template wjItemTemplate
                             let-item="item">
                    <div class="dropdown-option"
                         [ngClass]="{
                            'wj-state-disabled': searchType != type.New,
                            'dropdown-item': true
                          }"
                         [title]="item.displayPath">
                        {{ item.categoryName }}
                        <!-- Only show remove icon in dropdown items (not input) -->
                        <span class="remove-tag"
                              *ngIf="dropdownVisible && searchType === type.New"
                              (click)="removeCategory(item, $event)">×</span>
                    </div>
                </ng-template>
            </wj-combo-box>
        </div>

    TS

     public removeCategory(item: any, event: MouseEvent) {
    event.stopPropagation(); // Prevent selecting the item
    this.selectedCategory = this.selectedCategory.filter((c) => c !== item);
    this.categoriesChanged.emit(this.selectedCategory);
  }

    In the above for the removeCategory below is what we are getting for the parm

    item = 						  {
    {"categoryName": "Category 4",
    "id": 4141796,
    "subCategoriesCount": 0,
    "itemCount": 0,
    "path": [
        "test/Category 4"
    ],
    "displayPath": [
        "test/Category 4"
    ],
    "hierarchyId": 11,
    "displayAttributeSet": true,
    "checkedOut": false,
    "primaryKey": "Category 4"
}


    I am attaching the video recording so that you have better understanding

    Use Case 1: Default Selection (Read-Only) Without “X” Button in Input

    Goal:

    Show a default selected item (e.g., “Televisions”) in the combobox.

    1.This item should not be selectable again from the dropdown.

    2.The selected item should not show an “X” button in the input box.

    3.However, the item can be deleted from the dropdown list using the “X” button there.

    Issue:

    1.Currently, the default item can be re-selected.(user can select the other dropdown value which we do not want)

    2.The “X” button appears in the input box, which we want to avoid. (You can clearly see from the video recording)

    Use Case 2: Auto-Select Next Item Without “X” Button in Input

    Goal:

    1.When the default item is deleted from the dropdown, the next item (e.g., “Category 1”) should be automatically selected — this part is working.

    2.The newly selected item should not show an “X” button in the input box.(similar to what in use case 1)

    3.The dropdown list should still show “X” buttons next to items for deletion — this is desired.

    Issue:

    The “X” button appears in the input box for the auto-selected item, which we want to hide.

    Use Case 3: Restrict Selection to Default Item Only

    Goal:

    1.Only the default item should be selectable.

    2.The user should not be able to manually select any other item from the dropdown.

    3.The default item can be deleted using the “X” button in the dropdown.

    Issue:

    Currently, other items are selectable manually, which we want to prevent.

    Attached the screen recording for your reference. Let me know if you have any issue.

    Please let us know how we can:

    1.Prevent re-selection of the default item.

    2.Hide the “X” button in the input box for selected items.

    3.Restrict manual selection to only the default item    .

    Zip file for video recording for your reference

    CategoryDrp.zip

  • vivek.pannu

    Posted 16 July 2025, 1:56 am EST

    Hi Nilesh,

    Thank you for sharing the additional information. As per our understanding, you have two major issues -

    The delete button ‘X’ text appears in the textbox when a value is selected. This happens because a span tag with ‘X’ as inner text is used in the template, and by default, the combobox text is set to the textContent of the selected item from the dropdown. To avoid this issue, you can simply replace the span tag with a delete icon or image that does not have any inner text. Please refer to the sample below for the same.

    It seems you want to disable the selection of an item by clicking any item in the dropdown, so that the user can not change the default selected item. To implement that, you can handle the ‘click’ event on the dropdown and prevent its default action. You’ll also need to prevent the default action of the ‘keydown’ event to make sure that the selected value cannot be changed using the keyboard. Now, the user can not select any item from the dropdown; however, he can delete any item by clicking the ‘delete’ button, and the next default item will be auto-selected.

    It seems these two fixes will cover all your requirements in all three use cases you mentioned. Here’s the sample for your reference - https://stackblitz.com/edit/angular-ivy-hfp6alwc?file=src%2Fapp%2Fapp.component.ts

    Regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.