JavaScript onfocusout event removes my button which cannot execute its code, because the focus remov-CodePudding

I am trying to implement a text field with dropdown search. The drop down items are buttons inside a div which has display: none CSS property. When I click it, The text field should change its content to the content of the button.

The problem is that the dropdown should disappear when the focus is removed from text field. ...AND when I click an item of dropdown, the focus is removed, the button disappears and its onclick doesn't get executed. Is it possible to execute button code which selects name before executing the code which removes this button?

Code:

<!DOCTYPE html>
<html>
<style>
#resident_name_inp:focus {outline: 3px solid #ddd;}

.dd {
  position: relative;
  display: inline-block;
}

.dd-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  overflow: auto;
  width: 100%;
  border: 1px solid #ddd;
  z-index: 1;
}

.dd-content button {
  background-color: #ffffff;
  width: 100%;
  padding-left: 4px;
  border: none;
  display: block;
}

.dd-content button:hover {
  background-color: #ddd;
}

</style>
<body>
  <div >
    <input
      id="name_inp"
      type="text"
      placeholder="Search Names..."
      onfocus="showNames()"
      onfocusout="hideNames()">
    <div id="dropdown_names" >
      <button type="button" onclick="selectName('alex')">alex</button>
      <button type="button" onclick="selectName('jake')">jake</button>
      <button type="button" onclick="selecttName('evgen')">evgen</button>
    </div>
  </div>
</body>

<script>
function showNames() {
  document.getElementById("dropdown_names").style.display = 'block'
}

function hideNames() {
  document.getElementById("dropdown_names").style.display = 'none'
}

function selectName(name) {
  document.getElementById("name_inp").value = name
}
</script>
</html>

CodePudding user response：

You can use relatedTarget to check if you clicked on a button element related to the input. Heres what to edit:

function hideNames() {
  if(event.relatedTarget != null){
    if(event.relatedTarget.tagName == 'BUTTON'){
      return
    }
  }
    document.getElementById("dropdown_names").style.display = 'none'
}

function selectName(name) {
  document.getElementById("name_inp").value = name
  document.getElementById("dropdown_names").style.display = 'none'
}

CodePudding user response：

ES6 solution using arrow functions, works for multiple dropdowns, and lots of comments in the JS to explain what's happening.

Also redid the styling to use CSS grid.

/* Get array of all .dd elements */
const dropdowns = Array.from(document.getElementsByClassName('dd'));

/*For each .dd element */
dropdowns.forEach(dropdown => {
  const input = dropdown.firstElementChild;
  const names = dropdown.lastElementChild;

  /* Add click event listener to <input> of .dd */
  input.addEventListener('click', () => dropdown.classList. toggle('show') );

  /* For each button in .dd-content */
  Array.from(names.children).forEach(option => {
    /* Add click event listener button */
    option.addEventListener('click', () => {
      /* Set input value to button value */
      input.value = option.innerHTML;

      /* Remove .show class from dropdown */
      dropdown.classList.remove('show');
    })
  });
});

.dd { display: grid }

.dd input { text-align: center }
.dd input { cursor: s-resize } .dd.show input { cursor: n-resize }

.dd .dd-content {
  grid-row-start: 2;
  border: 1px solid #ddd;
  display: none;
}
.dd.show .dd-content { display: block }

.dd .dd-content button {
  background-color: #ffffff;
  width: 100%;
  padding-left: 4px;
  border: none;
  display: block;
}

.dd .dd-content button:hover { background-color: #ddd }

<div >
  <input type="text" placeholder="Search Names...">
  <div >
    <button type="button">alex</button>
    <button type="button">jake</button>
    <button type="button">evgen</button>
  </div>
</div>

<hr>

<div >
  <input type="text" placeholder="Some Thing Else">
  <div >
    <button type="button">Some</button>
    <button type="button">Thing</button>
    <button type="button">Else</button>
  </div>
</div>