Issue Summary

The mouse wheel scroll does not work on the "Add Watchers" autocomplete dropdown. When a user types a search term in the "Add Watchers" picker and the results exceed what the visible dropdown area can display, the additional results can't be reached with the mouse wheel.

Steps to Reproduce

1. Navigate to any issue in any project
2. Click the watcher icon on the issue
3. In the "Add Watchers" search field, type a letter that matches multiple users (e.g., a)
4. Observe the autocomplete dropdown displaying matching results that exceed the visible area
5. Attempt to scroll the dropdown list using the mouse wheel

Expected Results

The autocomplete dropdown should be scrollable using the mouse wheel, allowing users to view and select all matching results.

Actual Results

The mouse wheel has no effect on the autocomplete dropdown. Users beyond the initially visible results are not accessible via mouse scroll. Only keyboard arrow key navigation or typing a more specific search term allows selecting additional users.

Workaround

1. Search for a specific user — type a more specific name to narrow down the autocomplete results.

2. CSS Override — add the following to Administration → System → Announcement Banner:

<style>
.select2-results,
.recipients-list,
[role="listbox"] {
    overflow-y: auto !important;
    max-height: 300px !important;
}
.select2-results__options,
.recipients-list__options {
    overflow-y: auto !important;
    max-height: 300px !important;
}
</style>

3. JavaScript Injection (if CSS doesn't work) — add to the same Announcement Banner:

 
<script>
(function() {
    var observer = new MutationObserver(function(mutations) {
        var dropdown = document.querySelector('.select2-results, [role="listbox"]');
        if (dropdown && !dropdown.dataset.scrollFixed) {
            dropdown.dataset.scrollFixed = 'true';
            dropdown.style.overflowY = 'auto';
            dropdown.style.maxHeight = '300px';
            dropdown.addEventListener('wheel', function(e) {
                e.stopPropagation();
                var scrollTop = this.scrollTop;
                var scrollHeight = this.scrollHeight;
                var height = this.clientHeight;
                var delta = e.deltaY;
                if ((delta < 0 && scrollTop <= 0) ||
                    (delta > 0 && scrollTop + height >= scrollHeight)) {
                    e.preventDefault();
                }
            }, { passive: false });
        }
    });
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();
</script>

Note: Workarounds 2 and 3 are unsupported customisations outside of Atlassian Support Offerrings and should be validated in a staging environment first.