Splitting exposed form filters amongst several blocks

Question

I have a views search page in D8 where I'm I have exposed filters that are shown in blocks. I'm also using search facet blocks. What I want in the sidebar is the exposed filter text search field, followed by the facets, and then an exposed filter for selecting a date range.

I've seen a few places mention you can create a duplicate of the views page keeping the same path and have one set of filters in one views block and others in an additional views block. I think this was for D7 because I can't make it work in D8. Basically they replace the url arguments when one or the other is submitted instead of combining them like they normally would do.

What I've currently done is shown the exposed filter block twice and using CSS (display: none) to aria-hidden="true" hide the redundant exposed filters from screens and assistive technology.

It gets flagged though when I used WAVE to test its accessibility since there are duplicative form labels. It's also, imho, a nasty hack and I'd rather do it the right way if possible.

Is there a right or better way?

Answer 1

Although not perfect, a possible solution is to modify the exposed form. For me, the file was views-exposed-form--search.html.twig.

You can then display your separate form elements using things like:

{{ form.items_per_page }}
{{ form.sort_bef_combine }}
{{ form.search_api_fulltext }}
{{ form.actions }}

If you need to load a view or other node inside you can do so with the twig tweak module and output things like

{{ drupal_entity('block', 'facetsummary') }}
{{ drupal_entity('node', node_id_created_in_preprocessor, 'search_highlight') }}

Essentially I used the exposed form markup to emulate what I wanted to do and my exposed form tag ended up wrapping around a large portion of my pages output.

Make sure to somewhere do something like this so that the forms hidden fields are also rendered

{{ form|without('search_api_fulltext','actions','results','items_per_page','sort_bef_combine') }}

As a note, this will only work if your exposed filters are close enough to do this with.

In my case I needed to load the full-text search at the top, a view in the middle and then my exposed filters next. This means that my view is now technically wrapped inside of the form tag.

If your filters are far enough apart then this may not work for you.

I hope this helps someone!

Answer 2

There is a solution to this, you can use the module Configurable Views Filter Block to split your search field from the rest of your exposed form, it also natively works with better exposed filters. Right now you may or may not also need the following patches to stitch everything together with facets (2.x), have not tested with 3.x, but will most likely be similar.

"drupal/configurable_views_filter_block": {
  "Issue #3347722: Stop using the build id for the block id": "https://git.drupalcode.org/project/configurable_views_filter_block/-/merge_requests/1.patch"
},
"drupal/facets": {
  "Issue #2986981-32: Ajax facet block seems to lose Views context": "https://www.drupal.org/files/issues/2023-01-04/2986981-32.patch",
  "Issue #3168241-8: Facets and exposed filters don't work together with Ajax": "https://www.drupal.org/files/issues/2021-12-05/3168241-8.patch"
}

You can also theme your view exposed forms, I had to add some theme suggestions to do so, you can see an explanation on #3347722 on how to do so. I just wrapped up a page using this method, and I was able to acomplish exactly what you were looking to do. Another great helper was using Formdazzle to expose more templates on my exposed form for theming.

Answer 3

In Drupal 8, Views pages allow you to render your exposed filters as a separate block. In your view, select your Page display, then, under Advanced, toggle on the option Exposed form in block.

You can now separately place the exposed filter like any other block. It doesn't even need to be on the same page as the view results.