Stop stealing focus without preventing combobox opening

Question

I've got a textbox. When the user focuses the textbox I bring up a helper to help them fill it in. When the textbox is blurred the helper disappears.

The problem is that the helper now needs to include a combobox (it's a plain select tag). Previously in order to allow the user to interact with the helper without losing focus, we used preventDefault() on mousedown events. However, it seems that the combobox's opening handler is a default event on a mousedown. So if we preventDefault, the combobox ignores the user's clicks. If we don't preventDefault, the combobox opens for a nanosecond and then the field loses focus, at which point the helper disappears, including the combobox you just opened.

How can I stop the field from losing focus but still allow the user to interact with the combobox?

Edit: I'd really rather avoid the input from losing focus. The helper's other functions don't really make sense when the input is not focused. I considered simply showing the helper after you click on the combobox even if the input is not focused but decided that I don't want to do this.

I actually have no idea how to use the plain DOM APIs to conditionally render like that ;p — Puppy, Nov 11 '15 at 09:19
You can write a custom ComboBox and open \ close it programmatically :) — Yeldar Kurmangaliyev, Nov 11 '15 at 09:20
http://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list — JNF, Nov 11 '15 at 09:25

Cedric Reichenbach · Accepted Answer · 2015-11-11T10:43:33.033

1

You can actually achieve this with pure CSS. Include both in a wrapper and display them on :focus - note that you can also select DOM siblings using the + operator.

select {
    display: block;
    visibility: hidden;
    transition: visibility 50ms;
}
textarea:focus + select,
select:focus {
    visibility: visible;
}

The transition prevents select from being hidden before receiving focus.

Here's a JSFiddle demonstrating above code.

Edit:

Apparently, you'd like to let users handle the select without it gaining focus. However, browsers immediately close it once it loses focus, so the only solution would be to use a custom selection widget which never closes automatically.

edited Nov 11 '15 at 10:43

answered Nov 11 '15 at 09:29

Cedric Reichenbach

8,970
6
54
89

You'd need the parent of the `select` in there as well, I understand it's a whole form – JNF Nov 11 '15 at 09:31
Hm, not necessarily - it's enough to know they're siblings, but yeah, it's probably safer to have a dedicated wrapper. – Cedric Reichenbach Nov 11 '15 at 09:33
This isn't really enough. It keeps the select visible, but the input still loses focus, which is not what I'm looking for here. – Puppy Nov 11 '15 at 09:50
The problem is that browsers will close the `select` once it loses focus, so there's no way to do this without either temporarily losing focus or having a custom selection component. – Cedric Reichenbach Nov 11 '15 at 09:57
Then I guess the correct answer is "You can't do that". – Puppy Nov 11 '15 at 10:38

score 0 · Answer 2 · answered Nov 11 '15 at 09:37

0

You could duplicate the show/hide functionality from the combo box itself, so the helper stays if the combo box is selected.

With jQuery it looks like:

$("input, select").focus(function(){
    $("div").show();
});
$("input, select").blur(function(){
    $("div").hide();
});

fiddle

answered Nov 11 '15 at 09:37

JNF

3,696
3
31
64

I've considered this, but I actually really want to avoid having the input lose focus because it impairs the user's ability to use the helper. Some of the functions of the helper are like, "Insert text at selection", which is not helpful if they don't have focus in the box. – Puppy Nov 11 '15 at 09:46

Stop stealing focus without preventing combobox opening

2 Answers2