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

[Cyril Ovely]

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

Regards,
Cyril Ovely

[Sureshkumar P]

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:

Regards,

Sureshkumar P

[Cyril Ovely]

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


Regards,
Cyril Ovely

[Sureshkumar P]

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) {

                _this.$bvModal

                  .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) {

                      _this.resetRowContents();

                    } else {

                      _proxy.element.ej2_instances[0].value =

                        _proxy.previousItemData.ItemCode;

                    }

                  })

                  .catch((err) => {

                    console.error("err", err);

                    // An error occurred

                  });

                // _this.resetRowContents();

              }

 

Find the modified sample in the attachment:

Attachment: Vue2Latest_3382680e.zip