Changing The Layout of Drupal's Exposed Filter

It's been years since I've become a fan of Drupal. This nice multi-purpose CMS helped me and users by a lot, digitalizing many manual office work that cannot be done by other CMS. But sometimes, I agree on one thing -- Drupal can be not pretty at all out of the box.

Creating views with 'some' exposed filters leads to this (some, not that much actually):

Oh boy, made me dizzy. Let's change it!

First of all, let's turn on the twig debugging so that we can see which twig template rendering this:

Change the twig.config debug parameter to true:

Then clear the cache, turn on the inspect element and reload the page. I am currently using bootstrap 5 theme, we can see that the twig that renders the page is the views-exposed-form.html.twig

We need to override it! Let's copy that and give it special views id -- so that only this views using this twig. My views id is 'data-ekspedisi':

Clear cache, done, Drupal loads it. Easy right?
Next, let's get into the real customing the layout. Lots of time, my user doesn't use filter, so let's just hide it into the accordion to save space:

Nice, now it's hidden. But if we open it, it will still be a mess.

 The fields are 9 in totals, so let's divide it into 3 columns. Don't forget to add the breakdown point so it'll fit nicely in the mobile-view:

Now we have nice and clean exposed filter:

 

This still have one flaw though -- the accordion will close if we change the page of the views when we use the filter... kinda annoying.

So for the quick fix, let's make twig collect the value of the field, and based on that, change the condition of the accordion:

Even though it's ugly, it works! Now I have a nice exposed filters.