In my asp.net user control, I am generating markup that looks like this:
<div id="combobox1">
<div id="combobox1_text"><span>combobox 1</span></div>
<div id="combobox1_ddl">
<input type="checkbox" id="combobox1_$1" />
<label for="combobox1_$1">Item 1</label>
<br />
<input type="checkbox" id="combobox1_$2" />
<label for="combobox1_$2">Item 2</label>
<br />
<input type="checkbox" id="combobox1_$3" />
<label for="combobox1_$3">Item 3</label>
<br />
<input type="checkbox" id="combobox1_$4" />
<label for="combobox1_$4">Item 4</label>
<br />
<input type="checkbox" id="combobox1_$5" />
<label for="combobox1_$5">Item 5</label>
<br />
</div>
</div>
Accompanying this control is a javascript file with the following class (simplified code):
ComboBox = function(cb) {
var pnlContainer = document.getElementById(cb);
var pnlComboBox = document.getElementById(cb + '_text');
var pnlDropdownList = document.getElementById(cb + '_ddl');
var isCollapsed = true;
var collapseDropdown = function() {
if (!isCollapsed) {
isCollapsed = true;
pnlDropdownList.style.display = 'none';
//-- additional custom handling code --
}
};
pnlComboBox.onclick = function() {
isCollapsed = !isCollapsed;
pnlDropdownList.style.display = (isCollapsed) ? 'none' : 'block';
};
pnlContainer.onclick = function(event) {
event.stopPropagation();
};
document.addEventListener('click', function() {
collapseDropdown();
}, false);
}
To create an instance of this class on my page, I use the following code:
cb1 = new ComboBox('combobox1');
Everything works perfectly until there are multiple instances of this control on the page. When one combobox is open and the user clicks on another combobox, the previous one doesn't collapse.
The Issue:
The problem arises from the event.stopPropagation() call, but resolving it is unclear to me.
For further details and demonstration, refer to the JsFiddle link below:
https://jsfiddle.net/x8qjo79f/
I recognize that the issue stems from event.stopPropagation(), however, I'm uncertain about how to address it.