What dictates the HTML that is generated for Front-End Search Tools?

Question

I'm not much of a front-end guy, and many areas of the "magically created" code remains a mystery to me as it just "happens" and I'm satisfied with it, so this is likely going to be one of the "duh" moments for me.

In this case I find two very different ways to create the HTML of the Front-End list view Search Tools. I don't understand where the fork in the road is that the two generate different output within <div class="js-stools-container-filters">...</div>.

The form.xml is virtually identical, and n both cases, view.html.php essentially begins as show below, yet display($tpl) renders different HTML. I've tried using different site templates, compared common files between the two, and am at a loss as to where to look next.

What code, or at least what factors, determine this difference in output to achieve the use of control-group/control-label classes in the Search Tools?

class ExampleViewXyzs extends JViewLegacy
{
    ...
    public function display($tpl = null)
    {
        $app = JFactory::getApplication();

        $this->items         = $this->get('Items');
        $this->state         = $this->get('State');
        $this->pagination    = $this->get('Pagination');
        $this->user          = JFactory::getUser();
        $this->filterForm    = $this->get('FilterForm');
        $this->activeFilters = $this->get('ActiveFilters');
        ...
        parent::display($tpl);

The Desired generated HTML looks like this (Use of control-group/control-label classes):

<div class="control-group">
    <div class="control-label">
        <label id="filter_meeting_year-lbl" for="filter_meeting_year" class="">Meeting Year</label>
    </div>
    <div class="controls">
        <select id="filter_meeting_year" name="filter[meeting_year]" class="inputbox chzn-done" onchange="this.form.submit()"
            <option> ................</option>
        </select>
    </div>
</div>

The current, and UNdesired generated HTML looks like this (NO use of control-group/control-label classes).

<select id="filter_source" name="filter[source]" class="inputbox chzn-done" onchange="this.form.submit();" style="display: none;">
        <option> ................</option>
</select>
<div class="chzn-container chzn-container-single" style="width: 220px;" title="" id="filter_source_chzn">
    <a class="chzn-single chzn-default" tabindex="-1"><span>Select an option</span><div><b></b></div></a>
    <div class="chzn-drop"><div class="chzn-search">
            <input autocomplete="off" class="active" type="text">
        </div>
        <ul class="chzn-results">
            <li class="active-result" data-option-array-index="0">- Select Something -</li>
            <li class="active-result" data-option-array-index="2">An Option</li>
        </ul>
    </div>
</div>

And, on a related note, with the use of the control-group class, the Search Tools remain open when the page is resubmitted, while the other does not. I'm assuming/hoping that is resolved with the answer to my question.

Answer 1

Your problem is jQuery's Chosen plugin.

JS scripts are almost always added using the JHTML class and its child classes. I've only had a quick look, but I think the problem script is injected at ln: 32 of /layouts/joomla/searchtools/default.php:

JHtml::_('searchtools.form', $formSelector, $data['options']);

I'm fairly certain this will result in /media/jui/js/jquery.searchtools.js being loaded in the browser, which is what's adding all the Chosen classes.

EDIT - I've had a longer look at the JS code. You should be able to disable Chosen by setting an option before the line I mentioned above:

$data['options']['chosenSupport'] = false;
JHtml::_('searchtools.form', $formSelector, $data['options']);

That should hopefully get you the output you want, but will mean chosenSupport is always disabled.

The options parameters are normally set when JLayoutHelper::render() is called, so that would be the more technically correct way of doing things. You'd need to look through your code to find out which execution of JLayoutHelper::render() is responsible for rendering the output you want to change, and amend it to something like:

JLayoutHelper::render('joomla.searchtools.default', array('view' => $this, 'options' => ['chosenSupport' => false]));

As another guess, the difference in output you've noticed may be due to either different options being sent when JLayoutHelper::render is called, or different layouts being rendered.