Styjun

I try to make a select box whose entries are opened after clicking into the input box. After selecting one of the items, the dropdown should be closed again.
I want to achieve the open/close part of the dropdown without the use of javascript.

The html looks like this:

<div id="outer">
 <input type="text" id="input">
 <div id="results">
 <div>Test 1 </div>
 <div>Test 2 </div>
 <div>Test 3 </div>
 <div>Test 4 </div> 
 </div>
</div>
<div id="label">
</div>

After clicking onto an item, the selected value should appear below the #outer div (just for demonstration purposes).
The Javascript for assigning click events to the dropdown values:

document.querySelectorAll("#results div").forEach(setClick);
function setClick(node) 
 node.addEventListener("click", setText.bind(null, node.innerHTML))

function setText(t) 
 document.getElementById("label").innerHTML = t;

Now I will show you my first draft of css code:

#outer 
 width: 200px;
 position: relative;

#input 
 width: 100%;

#results 
 position: absolute;
 width: 100%;
 display: block;
 visibility: hidden;
 background-color: white;

#results > div:hover 
 background-color: lightblue;
 cursor: pointer;

#outer:focus-within #results, #results:hover 
 visibility: visible;

This works like a charm but fails in one point:
After clicking an item, the dropdown is not closed. This is because of the #results:hover selector which is needed to keep the dropdown open after clicking onto an item. The click takes the focus out of the input field, thus the focus-within selector is not applied anymore. As the focus is removed from the input before the click occurs, the dropdown is hidden when the final click arrives in the document (this is my understanding of the problem).
Thus I use the hover selector which forces the div to keep open as long as the mouse is above the div.

You can test this here:
https://jsfiddle.net/hcetz1og/3/

My solution for this was a transition that hides the dropdown after the focus has been taken away:

#outer:not(:focus-within) #results:hover 
 visibility: hidden;
 transition-property: visibility;
 /*use 10 ms and the clicked value in the drop down won't be shown */
 transition-delay: 100ms;
 transition-timing-function: step-end;

This works on my machine when I use 100ms as a delay. If I use 10ms, I have the same problem again. It seems that the click event is triggered "very" late.

Feel free to test it here:
https://jsfiddle.net/hcetz1og/2

Question:
How long will it take until the click event arrives at the document? Is there a fixed time span I have to wait or can the delay depend on every machine?
If so, I am forced to not use plain CSS but must use javascript for this I think.

Edit:
Feel free to post an alternative solution using plain css. But please be aware that I mainly want to focus on getting an answer to this question, not alternative solutions.

As @Mark Baijens said in the comments, using timeouts is a bad practice, so here is a pretty clean solution.
I used JavaScript to render the dropdown, not the CSS, because the CSS is where Your issue is coming from.

I don't know why would You want to set the innerHTML, but not some other property, like style.visibility for example. It just doesn't make sense to me, so with that in mind, let's get our hands on this :)

Working demo >> HERE <<.

Step 1 - remove the #outer...:hover parts of CSS

So, You are left with this:

#outer 
 width: 200px;
 position: relative;

#input 
 width: 100%;

#results 
 position: absolute;
 width: 100%;
 display: block;
 visibility: hidden;
 background-color: white;

#results > div:hover 
 background-color: lightblue;
 cursor: pointer;

Step 2 - add the onfocus event to the input field

Just assign a function call to the onfocus attribute of the input. Everything else in the HTML stays the same.

<div id="outer">
 <input type="text" id="input" onfocus="showElements()">
 <div id="results">
 <div>Test 1 </div>
 <div>Test 2 </div>
 <div>Test 3 </div>
 <div>Test 4 </div> 
 </div>
</div>
<div id="label">
</div>

Step 3 - create the showElements and hideElements function:

function showElements() 
 document.getElementById("results").style.visibility = 'visible';

function hideElements() 
 document.getElementById("results").style.visibility = 'hidden';

Step 4 - call the hideElements() when clicked outside the input element

There are two cases for the click outside the input element:

• Case 1 - we clicked on one of the divs inside the #results wrapper


• Case 2 - clicking outside the input field, but not on one of the divs inside the #results wrapper

In the first case, we will modify the assignment of the onclick handler like this:

document.querySelectorAll("#results div").forEach(setClick);
function setClick(node) 
 node.addEventListener("click", setTextAndHideElements.bind(null, node.innerHTML));

So, the setText function now becomes setTextAndHideElements and looks like this:

function setTextAndHideElements(t) 
 document.getElementById("label").innerHTML = t;
 hideElements();

For the second case (clicking outside the input field, but not on one of the divs inside the #results wrapper), we must watch for the click on the whole page (document element), and respond to the action like this:

document.onclick = function(e) 
 if (e.target.id !== 'input')
 hideElements();
 

Note: this will override any previously assigned onclick events assigned to the document element.

As mentioned in the beginning, working demo is >> HERE (codepen.io) <<.

I tried another solution which requires no setting of additional JS events.
See: https://jsfiddle.net/hcetz1og/4/

I gave every result item a tabindex of "0" to ensure, those items can be focusable.
Then i removed the #outer:not() part from the css and replaced the hover selector with this: #results:focus-within. Additional I called node.blur() on the node after clicking onto them.

Summary:
Change in HTML:

<div tabindex="0">Test 1 </div>

Change in JS:

function setText(t, node) 
 document.getElementById("label").innerHTML = t;
 node.blur();

Change in CSS:

#outer:focus-within #results, #results:focus-within 
 visibility: visible;

What do you think about this one? Should be stable I think because the focus onto the #results div is set before the click event is triggered onto the result item.
Event order should be (based on my observation):

input focus -> input blur -> item focus -> item click

Not sure if the step between blur and focus can lead to a visible problem. Theoretically, the results div must be hidden and shown again in a very small amount of time.
But I investigated this with chrome's performance timeline and did not recognize a new render between both events. One can see, that the result item is focused (outline is set onto it) and then it disappears as expected.