On Click and Focusout firing the same thing twice

Hello, this probably is a little thing but unfortunately i don’t know hot to do it.
I have already tried add a Class and compare it, with some logic structure with true, false, 0, 1 and nothing worked for me.
A just want the button on click or focusout the input field inside the form calls the same thing, a slideToggle or slideUp.
But when i click the search the same event is called twice.

Here it is my CodePen, thanks for any help.

That’s correct, it’s going to fire twice if the search field is visible and used.

So when you first visit this page, the search form is hidden You click the search button and the search form is shown and the form field is given focus.

Now you enter a search criteria and you click the search button again. The focusout will fire and hide the search form because you’ve now set focus to another element. Then the onclick event fires and shows the form again.

It’s an odd behavior pattern to begin with (why hide the search form when you click the button?), but the only way I can think of to resolve it would be to check in the onclick event before calling the toggle. Something like

  if ($('#search_form_input').val().length == 0) {
      $('#navbar__search').slideToggle(300);
      $('#search_form_input').focus();
  }

A major downfall to this approach is it will not open up the form if you want to go back in there right after you search it, so you’ll need to find a way to clear the form once a search has occurred…

Thanks, i had some help and this was the result.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.