In Joomla 4, there is the layout joomla.searchtools.default for the filters in a list view that you can see everywhere in the BackEnd.

In a list view of my custom component (FrontEnd), I managed to apply the layout joomla.searchtools.default for the filters. All is working fine.

Now I want to customize the layout. To avoid touching core files, I made a copy of the templates in the layout (joomla.searchtools.default) to my custom component. All is working fine.

Specifically, I want to get rid of the “filter options” button (which hides and shows the filters), but keep the useful “clear” button. This way, users will always see the filters.

There is a template called bar.php where you can see the following code:

<div class="filter-search-actions btn-group">
    <?php if ($filterButton) : ?>
        <button type="button" class="filter-search-actions__button btn btn-primary js-stools-btn-filter">
            <?php echo Text::_('JFILTER_OPTIONS'); ?>
            <span class="icon-angle-down" aria-hidden="true"></span>
        </button>
    <?php endif; ?>
    <button type="button" class="filter-search-actions__button btn btn-primary js-stools-btn-clear">
        <?php echo Text::_('JSEARCH_FILTER_CLEAR'); ?>
    </button>
</div>

In the code snippet, you can see two buttons: JFILTER_OPTIONS and JSEARCH_FILTER_CLEAR

There is other template called filters.php that really displays the filters:

<?php if ($filters) : ?>
    <?php foreach ($filters as $fieldName => $field) : ?>
        <?php if ($fieldName !== 'filter_search') : ?>
            <?php $dataShowOn = ''; ?>
            <?php if ($field->showon) : ?>
                <?php $wa->useScript('showon'); ?>
                <?php $dataShowOn = " data-showon='" . json_encode(FormHelper::parseShowOnConditions($field->showon, $field->formControl, $field->group)) . "'"; ?>
            <?php endif; ?>
            <div class="js-stools-field-filter"<?php echo $dataShowOn; ?>>
                <span class="visually-hidden"><?php echo $field->label; ?></span>
                <?php echo $field->input; ?>
            </div>
        <?php endif; ?>
    <?php endforeach; ?>
<?php endif; ?>

How could I get rid of the JFILTER_OPTIONS button (without losing the visibility of the filters) and maintain the functionality of the JSEARCH_FILTER_CLEAR button?

All is related with the js-stools-container-filters class in the divs’ containers, I suppose, but I can’t find more information.

Code snippet in the default_filter.php template (the “main” template):

// Load search tools
HTMLHelper::_('searchtools.form', $data['options']['formSelector'], $data['options']);
?>
<div class="js-stools" role="search">
    <?php if ($data['options']['showSelector']) : ?>
    <div class="js-stools-container-selector">
        <?php echo $this->sublayout('selector', $data); ?>
    </div>
    <?php endif; ?>
    <div class="js-stools-container-bar">
        <div class="btn-toolbar">
            <?php echo $this->sublayout('bar', $data); ?>
            <?php echo $this->sublayout('list', $data); ?>
        </div>
    </div>
    <!-- Filters div -->
    <div class="js-stools-container-filters clearfix<?php echo $filtersActiveClass; ?>">
        <?php if ($data['options']['filterButton']) : ?>
        <?php echo $this->sublayout('filters', $data); ?>
        <?php endif; ?>
    </div>
</div>
<?php if ($data['options']['showNoResults']) : ?>
    <?php echo $this->sublayout('noitems', $data); ?>
<?php endif; ?>