Select2 is a jQuery-based replacement for HTML select elements. Heap relies on DOM events to capture events, such as select change events, and the Select2 library blocks those DOM events from propagating. This causes Heap to not detect the default DOM change events for this library.
As a result, clicks may not always be captured if the target is embedded within a select2 element.
If you would like to capture interactions on Select2 elements, there are two workarounds to get usage data on these type of elements:
1. Analyze the action captured by Heap
This option allows you to leverage autocaptured data that is readily available. Depending on how you have select2 implemented, this may mean capturing changes instead of clicks, or capturing clicks instead of changes.
For example, clicks on select elements are different from changes on select elements. A change event requires the input value to change, whereas a click event will occur as long as the input is clicked. This means you’ll most likely see an inflated number of clicks versus the actual number of input changes.
2. Implement a custom heap.track() event for Select2 elements.
You can trigger a custom heap.track() event for whenever select2 dropdowns are changed (see Select2 events documentation). Note that heap.track() events are not retroactive, meaning data will exist for these events only after the heap.track() code is implemented.
Need help? Please post in Community or contact us via the Get support page in Heap.