We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to add a popup asking for consent before deleting an autocomplete value

Hi Team,

I'm working on a requirement that calls for me to display a confirmation popup prior to deleting an Autocomplete item from the grid.

Currently, even before the user accepts in the pop-up, the value is erased when they click the Cross icon in Autocomplete. Only once the user confirms it on the popup should the value be deleted.

Same functionality should apply when user remove value using "Backspace" key from keyboard.
The example project is included below. If you need anything, just let me know.

Vue Template (forked) - CodeSandbox

Cyril Ovely

3 Replies

SP Sureshkumar P Syncfusion Team February 24, 2023 10:46 AM UTC

Hi Cyril,

Based on your shared code example, you have used our old version. We suggest you use our latest version to get the previously selected item inside the value change event argument. Based on that argument value you can reset the autocomplete value property based on the confirmation dialog.

Find the latest release change event argument here:


Sureshkumar P

CO Cyril Ovely February 24, 2023 12:04 PM UTC

Hi Suresh,

The default functionality of Autocomplete component is removing the value on click of "Cross(X)" icon. Which we want to override with the requirement below.

when we click the cross icon, we want a confirmation box to appear. If we choose yes, we want to remove the data from the autocomplete; if we choose no, we want to leave everything as it is.

It would be helpful if you could make changes to the sample project attached.
Vue Template (forked) - CodeSandbox

Cyril Ovely

SP Sureshkumar P Syncfusion Team February 27, 2023 10:41 AM UTC

Cyril, as per our previous update you can achieve your requirement after upgrading our source packages with the latest version by using the below code example in the autocomplete component change event handler method.

Find the code changes here:

changeItemCode(event) {

              var _proxy = event;

              if (event.value === null) {


                  .msgBoxConfirm("Are you sure want to delete?", {

                    title: "Delete",

                    size: "md",

                    buttonSize: "sm",

                    okVariant: "danger",

                    okTitle: "Delete",

                    cancelTitle: "Cancel",

                    bodyClass: "d-flex",

                    footerClass: "p-2",

                    hideHeaderClose: false,

                    centered: true,


                  .then((value) => {

                    if (value) {


                    } else {

                      _proxy.element.ej2_instances[0].value =




                  .catch((err) => {

                    console.error("err", err);

                    // An error occurred


                // _this.resetRowContents();



Find the modified sample in the attachment:

Attachment: Vue2Latest_3382680e.zip

Live Chat Icon For mobile
Up arrow icon