Dropdown closes immediately

Question

I want my dropdown to close after each click outside itself and the input field. But after click, the field instantly opens and closes. Here's the code. It's very bulky, but it's possible to understand.

 var slitems = document.getElementsByClassName('slit'); ddown = document.getElementsByClassName('ddown'); function valueChange(n){ var slitemsin = document.getElementsByClassName('s'+(n+1)); for(var j=0;j<slitems.length;j++){ slitemsin[j].addEventListener('click', function(){ ddown[n].value = this.textContent || this.innerText; document.getElementById('sl'+(n+1)).classList.remove('slactive'); });}} function ddownEvent(n){ return function(){ document.getElementById('sl'+(n+1)).classList.add('slactive'); ddown[n].classList.remove('req'); ddown[n].classList.add('filled'); valueChange(n); }; }; function ex(e,n){ return function(){ if(e.target != ddown[n] && e.target.id != 'sl'+(n+1)){ if(ddown[n].value === 'day' || ddown[n].value === 'month' || ddown[n].value === 'capacity' || ddown[n].value === 'year' || ddown[n].value === "hh" || ddown[n].value === 'mm') ddown[n].classList.remove('filled'); document.getElementById('sl'+(n+1)).classList.remove('slactive'); } }; } for(var n=0; n<ddown.length; n++) { ddown[n].addEventListener('mousedown',ddownEvent(n)); ddown[n].addEventListener('mouseup', ex(event,n)); } 

 html { background: black; } body { background: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100vh; } .frow { width: 1500px; height: 40px; border-left: 6px white solid; margin-top: 25px; } .frow:first-child{ margin-top:60px; } .ptext { font-family: "Helvetica"; font-size: 22px; background: none; border: none; border-bottom: 3px #525252 solid; color: #525252; transition: all .1s; margin-left: 30px; display: inline-block; resize:none; padding: 0; } .filled { color: white; border-bottom: 3px white solid; } .ptext:focus{ color: white; border-bottom: 3px white solid; } .ptext:first-child { margin-left: 20px; } .ddown { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .sl{ position: absolute; height: 0px; box-shadow: 0px 0px 0px 0px black; overflow: auto; cursor: pointer; visibility: hidden; transition: all .15s; background-color: white; } .sl::-webkit-scrollbar{ display:none; } .slit { width: 100%; height: 40px; line-height: 40px; text-align: center; font-family: "Helvetica"; font-size: 22px; color: #292929; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .slit:hover{ background-color: #525252; color: white; } .slactive{ height: 220px; visibility: visible; box-shadow: 0px 0px 34px 0px black; } 

  <div class="frow"> <input name="Day" spellcheck="false" class="ptext ptextc ddown" type="text" value="day" minlength="1" maxlength="2" style="height:30px;width:50px;" readonly/> <ul class="sl" id="sl1" style="width:50px;left:15px;top:90px;"> <li class="slit s1">1</li> <li class="slit s1">2</li> <li class="slit s1">3</li> <li class="slit s1">4</li> <li class="slit s1">5</li> <li class="slit s1">6</li> <li class="slit s1">7</li> <li class="slit s1">8</li> <li class="slit s1">9</li> <li class="slit s1">10</li> <li class="slit s1">11</li> <li class="slit s1">12</li> <li class="slit s1">13</li> <li class="slit s1">14</li> <li class="slit s1">15</li> <li class="slit s1">16</li> <li class="slit s1">17</li> <li class="slit s1">18</li> <li class="slit s1">19</li> <li class="slit s1">20</li> <li class="slit s1">21</li> <li class="slit s1">22</li> <li class="slit s1">23</li> <li class="slit s1">24</li> <li class="slit s1">25</li> <li class="slit s1">26</li> <li class="slit s1">27</li> <li class="slit s1">28</li> <li class="slit s1">29</li> <li class="slit s1">30</li> <li class="slit s1">31</li> </ul> 

ddown[n] is an input field, sl1, sl2, sl3, ..., 'sl'+(n+1) are dropdown IDs.

Answer 1

Try to attach event to mouseup instead. Looks like mousedown event fires first and interferes with click event handler.