Issue with button click inside autocomplete

[Cyril Ovely]

Hi Team,

I am working on a requirement where I want to add item to grid on click of 'Add' button in autocomplete dropdown in sidebar. I have added condition to check whether user has clicked on add button, but sometimes even when user is clicking on 'Add' button it failing the condition.



To load images from assets I have rendered "ItemTemplate" as a new component.
I am adding the working sample below. Please help me with this requirement.


Regards,
Cyril Ovely

Attachment: syncfusionautocompleteclickissue_aac13d2e.zip

[Sureshkumar P]

Hi Cyril,

We suggest you change the target element code example like the below code to achieve your requirement.

Find the code example here:

clickHandler: function (e) {

      alert(e.target.classList.contains("customButton"), "clickHandler");

      var clickTarget = e.target.offsetParent.id;

      var itemIndex = parseInt(clickTarget.split("-").pop(), 10);

      let selectedItem =

        this.$refs.ItemSearchForSideBar.ej2Instances.dataSource[itemIndex];

      // validating the target element is span element which is inside the button wrapper element

      var targetelement = e.target.tagName === 'SPAN' ? e.target.parentElement.classList.contains("customButton") : e.target.classList.contains("customButton");

      if (!targetelement) {

        // On click outside of ADD button

        this.isButtonClick = false;

        this.$refs.ItemSearchForSideBar.ej2Instances.hidePopup();

        this.tempValue.hide();

        this.selectedSideBarItem = selectedItem;

      } else {

        // On click ADD button

        this.isButtonClick = true;

        this.dataGrid.push(selectedItem);

        this.$refs.SO_lineItem_Grid.refresh();

      }

    },

 

Find the modified sample in the attachment:

Regards,

Sureshkumar P

Attachment: autocomplete_bed20f2e.zip