JSFiddle - React, Tailwind, and code Playground

by tripcollor

HTML

<p>Нажми на инпут. При выборе из выпадающего списка не определяется элемент по которому кликнули (сморти в консоль)</p>
<br>
<div id="message">
  
</div>
<br>
<input type="text" id="select-input">
<div class="select-list hidden" id="select-list">
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
</div>

SCSS

.select-list{
  width: 200px;
  height: 100px;
  background: gray;
  position: fixed;
  overflow-y: auto;
  
}

.select-list div{
  padding: 5px 10px;
  cursor: pointer;
  &:hover{
    background: darken(gray, 20%);
  }
}

.hidden{
  display: none;
}

JavaScript

var selectInput = document.getElementById('select-input');
var selectList = document.getElementById('select-list');
var message = document.getElementById('message');


document.addEventListener('mousedown', function(e){
  console.log(e.target);
  message.innerHTML = e.target.tagName;
});
  
selectInput.addEventListener('focus', function(e){
  selectList.classList.remove('hidden');
  let height = this.offsetHeight;
/*   let top = this.getBoundingClientRect().top;
  let left = this.getBoundingClientRect().left; */

  //selectList.style.cssText = `top: ${top + height}px; left: ${left}px;`;
});

selectInput.addEventListener('blur', function(e){
  selectList.classList.add('hidden');
});