Automatically focus search bar after clicking search (search-slide)

[Taeir]

Is your feature request related to a problem? Please describe. When you click the search button in the header, you cannot immediately start typing, because it does not focus the actual search field.

Describe the solution you'd like Automatically focus the search field when the search button is clicked and the search bar is shown (search-slide)

Additional context I tried messing around with some javascript to make this happen and it is slightly tricky. Sliding the header down does not trigger any events on which one could listen. If I add an additional onclick handler to the search button, I can make it focus the search, but only if the handler is added after the one which slides the element down.

As a proof of concept, adding the following javascript to app/views/layouts/_header.html.erb works.

<script>
  $(document).ready(function () {
      $('a[data-header-slide="#search-slide"]').on('click', focusSearch);
  });

  var search = false;
  function focusSearch() {
      search = !search;
      if (search) {
          $('#search').focus();
      }
  }
</script>

While this works, it seems a bit dirty. One potential solution would be if co-design triggers some event, e.g. slide_open or slide_close. Then the listening behavior could be defined elsewhere.

[cellio]

@luap42 can you weigh in on whether this should be done in co-design vs. qpixel? Thanks.

[cellio]

@ArtOfCode- can you weigh in on the question about doing this in co-design vs qpixel?

[ArtOfCode-]

Probably better to do this in QPixel. Makes more sense for an application-specific use case than doing it as part of the design framework.