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

Issue with button click inside autocomplete

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.

Cyril Ovely

Attachment: syncfusionautocompleteclickissue_aac13d2e.zip

1 Reply

SP Sureshkumar P Syncfusion Team October 17, 2022 06:25 AM

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 =


      // 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.selectedSideBarItem = selectedItem;

      } else {

        // On click ADD button

        this.isButtonClick = true;






Find the modified sample in the attachment:


Sureshkumar P

Attachment: autocomplete_bed20f2e.zip

Live Chat Icon For mobile
Up arrow icon