Remove "search" close JS from theme.js and move it to child

[Axos11]

I know, that the change was initially brought up by me but I just found out that some custom search plugins offer multilayer suggestions (e.g. add product to cart directly in the suggestion form (fibosearch). That said, the html for the suggestions is placed outside of the element with the ID #collapse-search.

code as is:
// Close collapse if click outside searchform $(document).on('click', function (event) { if ($(event.target).closest('#collapse-search').length === 0) { $('#collapse-search').collapse('hide'); } });

I have to solutions for my issue in mind. Either we extend the solution to also check for a "key"-class like .search-area. Then I could add that class on pageload to the elements. Or if we move it to the custom.js file (or add a new "presets.js" file in the child template). I could just add the classes of the two areas without impacting the pageload.

So my preferred solution would be the presets.js
Sadly I couldn't find a simpler solution.

[crftwrk]

Hmm, adding features to child that the parent doesn't have by default seems like the wrong approach to me. However, I understand the point. What's wrong with using a key class, this is a good idea?

Quickly played around by adding searchform-focus class to search block and classic searchform. Collapse hides on click outside if this class is present. Otherwise collapse stays open:

bootscore/inc/blocks/block-widget-search.php

Line 40 in b391e22

'wp-block-search__input form-control"',

Replaced with:

'wp-block-search__input form-control searchform-focus"',

And for the classic widget:

bootscore/searchform.php

Line 3 in b391e22

<input type="text" name="s" class="form-control" placeholder="<?php _e('Search', 'bootscore'); ?>">

Replaced with:

<input type="text" name="s" class="form-control searchform-focus" placeholder="<?php _e('Search', 'bootscore'); ?>">

// Search form focus when collapse is shown
$('#collapse-search').on('shown.bs.collapse', function () {
  $('.searchform-focus').trigger('focus');
});

// Close collapse if click occurs outside #collapse-search and if an input has .searchform-focus
$(document).on('click', function (event) {
  if (
    $(event.target).closest('#collapse-search').length === 0 &&
    $('#collapse-search .searchform-focus').length > 0
  ) {
    $('#collapse-search').collapse('hide');
  }
});

This is just a rough sketch and I'm sure this can be made better. While we are here, it seems that line 30 and 39 in block-widget-search.php can be deleted.