How to Control Popup Closure via Templates in JavaScript Split Button?

When using the SplitButton component with a template inside the popup, the default auto-close behavior upon item selection is suppressed. This allows custom interaction handling within the template, which is particularly useful for complex UI scenarios. To manually control the popup close behavior, bind a click event to the parent container and use event delegation to detect child element clicks.

Steps to Handle Popup Closure Manually

1. Attach an Event Listener to the Parent Container
   • Attach a click event listener(addEventListener method) to the parent container of the SplitButton popup. This ensures that all child elements within the container are monitored for clicks.

2. Detect Clicked Elements with Event Delegation
   • Within the event handler, use the event.target property to identify the specific child element that was clicked.
   • Implement a condition to verify that the clicked element is not the parent container itself (using clickedElement !== this).

3. Manually Toggle or Close the Popup

   • Use the toggle method on the SplitButton instance to close or toggle the popup manually.

Example Code

The following implementation demonstrates this approach using plain JavaScript:

// Bind a click event listener to the parent container
const parentContainer = document.getElementById('first');
parentContainer.addEventListener('click', function (event) {
   const clickedElement = event.target; // Identify the clicked child element
   if (clickedElement !== this) { // Ensure the click is not on the parent container
       console.log('You clicked:', clickedElement.id);
       // Manually toggle or close the SplitButton popup
       (splitBtn as any).toggle();
   }
}); 

Key Notes

• event.target: Refers to the specific child element that was clicked.
• event.currentTarget: Refers to the element to which the event listener is attached (in this case, the parent container #first).
• clickedElement !== this: Ensures that the click originates from a child element, not the parent container itself.

Working Example

To see a working example of this implementation, refer to the following demo:
https://stackblitz.com/edit/9afhbwhm-qyzgupnv?file=index.html,index.ts

Preview

Conclusion

We hope this article helped you learn how to Control Popup Closure via Templates in JavaScript Split Button.

You can refer to our JavaScript Split Button feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications. You can also explore our Javascript Split Button example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Tract, or feedback portal. We are always happy to assist you!