select2/select2

Shadow DOM Issue: Selection Dropdown Hangs Open When Clicked Elsewhere On Page

Open

#5,781 opened on Feb 25, 2020

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (25,772 stars) (6,283 forks)batch import
4.xconfirmed bugfeature: dropdownhelp wanted

Description

As a user of Select2, I would like the dropdown menu to close when I click elsewhere on the page because this is the expected and natural behavior of selection dropdowns.

Expected Behavior: When a the selection dropdown is open and a click happens outside of the dropdown menu, the dropdown menu should close.

Actual Behavior: The dropdown does not close when a click event occurs outside of the open dropdown menu.

Steps To Reproduce: Create a Select2 element in the Shadow DOM and configure it to open a dropdown menu when a user is selecting an option. Click outside of the dropdown menu and Select2 element. The dropdown menu will hang open.

Notes: I consider this a bug and not a feature request because it seems that the default behavior of Select2 is that clicking outside of the dropdown menu closes it. JSFiddle: https://jsfiddle.net/mslocum/kfqd7nga/

Contributor guide

Tech stack
javascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic understanding of Shadow DOMFamiliarity with jQuery event bindingKnowledge of Select2 dropdown logic
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
Investigate how Select2 handles outside clicks to close the dropdown. The issue likely stems from event listeners not being attached to the correct shadow root or not accounting for event retargeting. Examine the source files such as 'src/js/select2/dropdown.js' and 'src/js/select2/utils.js' for click handlers. Review the provided JSFiddle to replicate the bug and test potential fixes. Consider using 'document.addEventListener' with 'event.composedPath()' to detect clicks outside the shadow DOM.