Ways to conceal a dropdown menu when the user clicks away from it

Question

Ways to conceal a dropdown menu when the user clicks away from it

Here is a simplified example of the input dropdown I am currently working on.

The functionality is as follows: when you focus on the input field, a dropdown menu appears. If you click on one of the options in the dropdown, that option gets populated in the input field and the dropdown disappears. I have implemented this using the onfocus event along with my custom functions dropdown(); and undropdown();.

I am facing a challenge where I need to make the dropdown disappear when someone clicks outside of it. Using the onblur event successfully hides the dropdown, but it also prevents the input from being populated when an option is clicked. This happens because the onblur function triggers first, making the input(); function inaccessible since the dropdown is already hidden.

If I add an onclick event to the body or a parent element, it registers the input's onfocus as a click, causing the dropdown to show and hide immediately without giving the user a chance to select an option.

Any guidance on how to sequence the functions properly so they execute in the correct order without conflicting with each other would be greatly appreciated.

You can access the JSFiddle demonstration here.

function input(pos) {
  var dropdown = document.getElementsByClassName('drop');
  var li = dropdown[0].getElementsByTagName("li");
  document.getElementsByTagName('input')[0].value = li[pos].innerHTML;
  undropdown(0);
}
function dropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display = "block"
}
function undropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display = "none";
}

.drop {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: visible;
}
.content {
  display: none;
  list-style-type: none;
  border: 1px solid #000;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 2;
  width: 100%;
  max-height: 190px;
  overflow-y: scroll;
}
.content li {
  padding: 12px 16px;
  display: block;
  margin: 0;
}

<div class="drop">
  <input type="text" name="class" placeholder="Class" onfocus="dropdown(0)"/>
  <ul class="content">
    <li onclick="input(0)">Option 1</li>
    <li onclick="input(1)">Option 2</li>
    <li onclick="input(2)">Option 3</li>
    <li onclick="input(3)">Option 4</li>
  </ul>
</div>

PS: Besides addressing the issue mentioned above, I welcome suggestions for refining the title of this question to make it more discoverable for those facing a similar dilemma.

javascript html css input drop-down-menu

Answer 1

Answer №1

When dealing with the onblur event, you have the option to invoke a function that triggers the undropdown(0); method after a brief setTimeout delay. Here is an example:

function set() {
  setTimeout(function(){ 
    undropdown(0);
  }, 100);
}

HTML

<input type="text" name="class" placeholder="Class" onfocus="dropdown(0)" onblur="set()" />

No additional modifications are necessary.

function input(pos) {
  var dropdown = document.getElementsByClassName('drop');
  var li = dropdown[0].getElementsByTagName("li");

  document.getElementsByTagName('input')[0].value = li[pos].innerHTML;
  undropdown(0);
}

function dropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display= "block"
}

function undropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display= "none";
}

function set() {
  setTimeout(function(){ 
    undropdown(0);
  }, 100);
}

.drop {
            position: relative;
            display: inline-block;
            vertical-align:top;
            overflow: visible;
        }

        .content {
            display: none;
            list-style-type: none;
            border: 1px solid #000; 
            padding: 0;
            margin: 0;
            position: absolute;
            z-index: 2;
            width: 100%;
            max-height: 190px;
            overflow-y: scroll;
        }

        .content li {
            padding: 12px 16px;
            display: block;
            margin: 0;
        }

<div class="drop">
        <input type="text" name="class" placeholder="Class" onfocus="dropdown(0)" onblur="set()" />
        <ul class="content">
            <li onclick="input(0)">Option 1</li>
            <li onclick="input(1)">Option 2</li>
            <li onclick="input(2)">Option 3</li>
            <li onclick="input(3)">Option 4</li>
        </ul>
    </div>

Answer 2

When dealing with the onblur event, you have the option to invoke a function that triggers the undropdown(0); method after a brief setTimeout delay. Here is an example:

function set() {
  setTimeout(function(){ 
    undropdown(0);
  }, 100);
}

HTML

<input type="text" name="class" placeholder="Class" onfocus="dropdown(0)" onblur="set()" />

No additional modifications are necessary.

function input(pos) {
  var dropdown = document.getElementsByClassName('drop');
  var li = dropdown[0].getElementsByTagName("li");

  document.getElementsByTagName('input')[0].value = li[pos].innerHTML;
  undropdown(0);
}

function dropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display= "block"
}

function undropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display= "none";
}

function set() {
  setTimeout(function(){ 
    undropdown(0);
  }, 100);
}

.drop {
            position: relative;
            display: inline-block;
            vertical-align:top;
            overflow: visible;
        }

        .content {
            display: none;
            list-style-type: none;
            border: 1px solid #000; 
            padding: 0;
            margin: 0;
            position: absolute;
            z-index: 2;
            width: 100%;
            max-height: 190px;
            overflow-y: scroll;
        }

        .content li {
            padding: 12px 16px;
            display: block;
            margin: 0;
        }

<div class="drop">
        <input type="text" name="class" placeholder="Class" onfocus="dropdown(0)" onblur="set()" />
        <ul class="content">
            <li onclick="input(0)">Option 1</li>
            <li onclick="input(1)">Option 2</li>
            <li onclick="input(2)">Option 3</li>
            <li onclick="input(3)">Option 4</li>
        </ul>
    </div>

Answer 3

Answer №2

To enhance the dropdown's accessibility, you can use the `tabindex` attribute to make it focusable. In the input's `blur` event listener, only hide the dropdown if the focus did not shift to the dropdown itself (refer to this solution for determining where the focus moved to).

<ul class="content" tabindex="-1"></ul>

input.addEventListener('blur', function(e) {
  if(!e.relatedTarget || !e.relatedTarget.classList.contains('content')) {
    undropdown(0);
  }
});

function input(e) {
  var dropdown = document.getElementsByClassName('drop');
  var li = dropdown[0].getElementsByTagName("li");
  document.getElementsByTagName('input')[0].value = e.target.textContent;
  undropdown(0);
}
[].forEach.call(document.getElementsByTagName('li'), function(el) {
  el.addEventListener('click', input);
});
function dropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display = "block"
}
function undropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display = "none";
}
var input = document.getElementsByTagName('input')[0];
input.addEventListener('focus', function(e) {
  dropdown(0);
});
input.addEventListener('blur', function(e) {
  if(!e.relatedTarget || !e.relatedTarget.classList.contains('content')) {
    undropdown(0);
  }
});

.drop {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: visible;
}
.content {
  display: none;
  list-style-type: none;
  border: 1px solid #000;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 2;
  width: 100%;
  max-height: 190px;
  overflow-y: scroll;
  outline: none;
}
.content li {
  padding: 12px 16px;
  display: block;
  margin: 0;
}

<div class="drop">
  <input type="text" name="class" placeholder="Class" />
  <ul class="content" tabindex="-1">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
  </ul>
</div>

Answer 4

To enhance the dropdown's accessibility, you can use the `tabindex` attribute to make it focusable. In the input's `blur` event listener, only hide the dropdown if the focus did not shift to the dropdown itself (refer to this solution for determining where the focus moved to).

<ul class="content" tabindex="-1"></ul>

input.addEventListener('blur', function(e) {
  if(!e.relatedTarget || !e.relatedTarget.classList.contains('content')) {
    undropdown(0);
  }
});

function input(e) {
  var dropdown = document.getElementsByClassName('drop');
  var li = dropdown[0].getElementsByTagName("li");
  document.getElementsByTagName('input')[0].value = e.target.textContent;
  undropdown(0);
}
[].forEach.call(document.getElementsByTagName('li'), function(el) {
  el.addEventListener('click', input);
});
function dropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display = "block"
}
function undropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display = "none";
}
var input = document.getElementsByTagName('input')[0];
input.addEventListener('focus', function(e) {
  dropdown(0);
});
input.addEventListener('blur', function(e) {
  if(!e.relatedTarget || !e.relatedTarget.classList.contains('content')) {
    undropdown(0);
  }
});

.drop {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: visible;
}
.content {
  display: none;
  list-style-type: none;
  border: 1px solid #000;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 2;
  width: 100%;
  max-height: 190px;
  overflow-y: scroll;
  outline: none;
}
.content li {
  padding: 12px 16px;
  display: block;
  margin: 0;
}

<div class="drop">
  <input type="text" name="class" placeholder="Class" />
  <ul class="content" tabindex="-1">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
  </ul>
</div>

Answer 5

Answer №3

Using an accepted answer may not always be the best solution. I encountered a tricky bug in a sophisticated application because I relied on a setTimeout function to introduce a delay of approximately 200ms for the browser to process dropdown clicks before triggering a blur event. Although this method seemed successful during my testing, it caused problems for some users, especially those with slower computer systems.

A more reliable approach is to check the relatedTarget property within the focusout event:

input.addEventListener('focusout', function(event) {
  if(!isDropdownElement(event.relatedTarget)) {
    // hide the dropdown
  }
});

The relatedTarget in the focusout event contains a reference to the element that is gaining focus. This method has proven to work consistently across all browsers I have tested, excluding IE10 and earlier versions, but including IE11 and Edge.

Answer 6

Using an accepted answer may not always be the best solution. I encountered a tricky bug in a sophisticated application because I relied on a setTimeout function to introduce a delay of approximately 200ms for the browser to process dropdown clicks before triggering a blur event. Although this method seemed successful during my testing, it caused problems for some users, especially those with slower computer systems.

A more reliable approach is to check the relatedTarget property within the focusout event:

input.addEventListener('focusout', function(event) {
  if(!isDropdownElement(event.relatedTarget)) {
    // hide the dropdown
  }
});

The relatedTarget in the focusout event contains a reference to the element that is gaining focus. This method has proven to work consistently across all browsers I have tested, excluding IE10 and earlier versions, but including IE11 and Edge.

Answer 7

Answer №4

If you're looking to create a custom dropdown menu, check out this helpful example from W3Schools: https://www.w3schools.com/howto/howto_custom_select.asp

The example provided on the website demonstrates how focus is managed within the custom dropdown menu:

An overarching click-handler is used to detect clicks outside of the dropdown list:

document.addEventListener("click", closeAllSelect);

. This setup ensures that all dropdown menus are closed when a user clicks anywhere in the document.

Additionally, when a user makes a selection from the dropdown list, the click event is immediately halted by using e.stopPropagation(); inside the selection-handler function.

This approach eliminates the need for a timer workaround and streamlines the functionality of the custom dropdown menu.

Answer 8

If you're looking to create a custom dropdown menu, check out this helpful example from W3Schools: https://www.w3schools.com/howto/howto_custom_select.asp

The example provided on the website demonstrates how focus is managed within the custom dropdown menu:

An overarching click-handler is used to detect clicks outside of the dropdown list:

document.addEventListener("click", closeAllSelect);

. This setup ensures that all dropdown menus are closed when a user clicks anywhere in the document.

Additionally, when a user makes a selection from the dropdown list, the click event is immediately halted by using e.stopPropagation(); inside the selection-handler function.

This approach eliminates the need for a timer workaround and streamlines the functionality of the custom dropdown menu.

Ways to conceal a dropdown menu when the user clicks away from it

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Unable to modify the height and color of tabs in Angular 6

Tips for maintaining accessibility to data while concealing input information

Text at the center of a series of circles on canvas

What is the best way to manage numerous asynchronous post requests in AngularJS?

Is it possible to adjust the height of ion.RangeSlider?

What is the best way to display grouped items horizontally in an ASP.NET ListView?

What is the most effective way to create a live preview using AngularJS and CSS?

What types of devices are compatible with the different versions of the Android operating system?

Using Java to input values into empty slots within an HTML document

Creating an Interactive and Engaging 3D Experience on Facebook with the Power of Javascript API

How to access vue.js 3 single file component functions from within a script tag

center the radio button with CSS3

Utilize JavaScript to submit the FORM and initiate the 'submit' Event

Angular 2 ensures that all of the columns receive updates

Issue with formatting and hexadecimal encoding in JavaScript

methods for selecting the final class within a div

Alignment problem detected in Firefox and Safari, but works perfectly in Chrome

Issues with handler event not firing properly using ASP.net, JavaScript, JQuery, and AJAX, despite successful AJAX implementation

NodeJS: Implement a method to delete a file or folder using a path without the file extension (Strategic approach)

What is the best way to retrieve nested objects in JSON using JavaScript and an Ajax request?