Stop focus theft without hindering the opening of the drop-down list

Question

I have a text box. When the user focuses the text field, I call the assistant to help them fill it. When the text box is blurry, the assistant disappears.

The problem is that the helper should now include combobox (this is a regular tag select). Previously, to allow the user to interact with the helper without losing focus, we used preventDefault () for mousedown events. However, it looks like the combobox open handler is the default event in mousedown. Therefore, if we prevent Default, the combobox ignores user clicks. If we do not prevent Default, then the combo box opens for a nanosecond, and then the field loses focus, after which the assistant disappears, including the combo box.

How can I stop the field from losing focus, but still allow the user to interact with the drop-down list?

Edit: I would prefer to avoid entering focus loss. Auxiliary functions do not make much sense when the input is not focused. I just tried to show the helper after you click on combobox, even if the input is not focused, but decided that I do not want to do this.

Answer 1

You can achieve this with pure CSS. Include both in the wrapper and show 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;
}

transitionprevents hiding selectuntil focus is obtained.

Here's a JSFiddle demonstrating the above code.

Edit:

-, , select, . , , , .

Answer 2

show/hide , , .

jQuery :

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

fiddle