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.
Although Heap is not able to capture change events on Select2 elements, it’s rarely valuable to capture when users change an input since it’s possible for users to change their inputs multiple times before actually submitting their selection. It’s better to capture the value of said input when the user submits their selection to capture their final selection rather than every time they change their selections.
If you’d like to capture interactions on Select2 elements, there are two workarounds to get usage data on these type of elements:
1. Analyze clicks instead of changes
This option allows you to leverage historical autocaptured data that is readily available. Rather than analyzing changes on the Select2 elements, you can analyze when users click on Select2 elements.
Note that 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.