Focusout function negates submit on click

Question

I have an animating search bar that is meant to hide when the user clicks outside of it. This however causes a direct click on the submit button next to it to be ignored. How can I go around this?

HTML,

    <form role="search" id="searchform" method="get" action="/">
      <i class="icon icon-search"></i>
      <a id="search-toggle" href="#"></a>
      <input type="submit" value="">
      <input id="search" type="text" name="s" value="">
    </form>

CSS (SCSS),

form {
            margin: 0;
            input {
                float: right;
            }
            input[type="text"] {
                height: 3rem;
                margin: 5px 0 0 0;
                padding: 0;
                width: 0;
                @include transition(all, .2s, ease-in-out);
                &.active {
                    width: 80%;
                    padding: .5rem 1rem;
                }
            }
            input[type="submit"] {
                width: 4rem;
                background-color: transparent;
            }
        }
    a, i {
        position: absolute;
        line-height: 4rem;
        width: 4rem;
        height: 4rem;
        text-align: center;
        top: 0;
        right: 0;
    }
    i {
        pointer-events: none;
        color: $light-grey;
        font-size: 1.6rem;
        z-index: 30;
        padding: 3px 0 0 0;
        @include transition(color, .2s, ease);
    }

JS,

  $('#search').focusout(function() {
    $(this).removeClass('active');
  });

Also tried using blur() instead of focusout(), same result.

Edit: Added some additional code. I'm having an icon and invisible link button overlaying the submit button to prevent it from submitting at once - I want to animate and display the search box first. After that box is revealed and the user types in something, this is when I run into trouble reaching the submit event. Now it requires two clicks, one to first close the box, then a second to trigger the button.

Can you post the code for the search bar? What type of element it is? — αƞjiβ, Nov 18 '14 at 15:28
This is an extremely broad description. Please show some code that can reproduce your problem. — Spokey, Nov 18 '14 at 15:29

score 3 · Answer 1 · edited May 23 '17 at 12:17

I know this is an old question, but it happens that I had the same issue and resolved it other way, so maybe the following code could be handy to someone else:

$('#text_input_id').blur(function(event){

    //event.relatedTarget gets the object that triggered the blur event(or "focus
    // out" event), in this case if it is a submit input, ignore the blur event.
    if($(event.relatedTarget).prop('type') === 'submit'){
        event.preventDefault();
    } 
    else {
        //Do whatever you want when focusing out. For instance:
        $('#search').css('display', 'none');
    }

});

¿Why this works?

The focusout or blur events (see the difference here) do prevent the submit button to work properly, because some how it overrides the submit event, which then causes the odd behavior of clicking twice to submit. The trick here is to use the event.relatedTarget, which gets the object that triggered the blur event. In this case, if it is any submit button <input type="submit" value="Search">), then call event.preventDefault() to workaround the issue.

Coming from the future; I could never imaging googling these keywords would get me the exact same issue. Thank you — Ahmad Alfy, Nov 17 '19 at 14:20

score 1 · Accepted Answer · answered Nov 18 '14 at 16:41

1

There are a few issues here, and maybe you can clarify your reasoning.

Is there are reason you're toggling the class active instead of using the :focus pseudo class for styling? This still allows keyboard usage, and you could bind something to that toggle link like this:

$('#search-toggle').click(function(){
    $('#search').focus();
});

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

If you don't want it to shrink down, you could apply the style when anything in that form is focused via css (note that I use a recommend a search input type instead of text):

form *:focus ~ input[type="search"] {
     width: 80%;
     padding: .5rem 1rem;
}

answered Nov 18 '14 at 16:41

Barry T. Smith

1,021
7
10

The reason is I wanted to add an animation as well for the focus event (highlight color). But I'll just skip that and go with this, it works and its clean. Thanks! – Staffan Estberg Nov 18 '14 at 16:51
You should be able to add CSS transitions here just as you would any other CSS styling. I'd give it a try. – Barry T. Smith Nov 18 '14 at 16:56
Yes. Now I just need to figure out how to toggle focus of another element (via the link button). – Staffan Estberg Nov 18 '14 at 17:02
Unsure what you mean. You mean when you click the #search-toggle link, you want to apply focus to something other than the #search item, or what? – Barry T. Smith Nov 18 '14 at 17:04
I have a similar feature done in a different manner here: http://alistafart.com/. Take a look at my source and see if that's the behavior you want. – Barry T. Smith Nov 18 '14 at 17:15
Thanks. AlistAfart? ;) – Staffan Estberg Nov 18 '14 at 17:23

score 1 · Answer 3 · answered Nov 18 '14 at 17:19

If you want to prevent the submit button from being pushed when the user hasn't entered anything in the search box, you can disable it by default, and then enable it once the user types something into the search input (this would allow you to not cover up the submit button with your anchor tag):

Submit button HTML:

<input type="submit" value="" disabled>

jQuery to enable the submit button only after keyup event in the search box:

$(document).ready(function () {

    $("#search").on("keyup", function () {
        if ($(this).val() != "") $(":submit").prop("disabled", false);
    });

});

Ah, yes this is sort of what I added: $('#search').keydown(function() { $('#search-toggle').hide(); }); — Staffan Estberg, Nov 18 '14 at 17:20

Focusout function negates submit on click

3 Answers3

¿Why this works?