[4.0] Clear button does nothing in search menu

[Alex Chartier]

I am working on revising my component for J4 and have inserted the searchtools but the Clear button does not seem to do anything, the search values remain and no network traffic is sent. I see no errors in the console. I have modeled the code after com_menus which is the closest look to what I am trying to achieve.

Below is the code I am using. Maybe someone can see something that I am missing. Thanks.

filter_emails.xml file:

<?xml version="1.0" encoding="utf-8"?>

<form>

<fields name="filter">

<field

name="search"

type="text"

inputmode="search"

label="COM_JMAILQ_SEARCH_IN_SUBJECT"

description="COM_JMAILQ_SEARCH_IN_SUBJECT"

hint="JSEARCH_FILTER"

/>

</fields>

<fields name="list">

<field

name="state"

type="list"

class="input-mini"

default="0"

label="COM_JMAILQ_SELECT_STATE"

description="COM_JMAILQ_SELECT_STATE_DESC"

onchange="this.form.submit();"

validate="options" >

<option value="0">COM_JMAILQ_SELECT_STATE</option>

<option value="11">COM_JMAILQ_EMAILSTATE_ERROR</option>

<option value="7">COM_JMAILQ_EMAILSTATE_FAILED</option>

<option value="1">COM_JMAILQ_EMAILSTATE_INJECTING</option>

<option value="3">COM_JMAILQ_EMAILSTATE_INPROCESS</option>

<option value="8">COM_JMAILQ_EMAILSTATE_ONHOLD</option>

<option value="9">COM_JMAILQ_EMAILSTATE_PENDING</option>

<option value="10">COM_JMAILQ_EMAILSTATE_QUARANTINED</option>

<option value="5">COM_JMAILQ_EMAILSTATE_QUEUED</option>

<option value="2">COM_JMAILQ_EMAILSTATE_READY</option>

<option value="6">COM_JMAILQ_EMAILSTATE_RETRY</option>

<option value="4">COM_JMAILQ_EMAILSTATE_SENT</option>

</field>

<field

name="limit"

type="limitbox"

class="input-mini"

default="25"

label="COM_CONTENT_LIST_LIMIT"

description="COM_HELLOWORLD_LIST_LIMIT_DESC"

onchange="this.form.submit();"

/>

</fields>

</form>

default.php

<div class="row">

<div class="col-md-12">

<div id="j-main-container" class="j-main-container">

<?php // Search tools bar

echo LayoutHelper::render('joomla.searchtools.default', array('view' => $this, 'options' => array('filterButton' => false))); 

?>

</div>

I have tried the above with and without the filterbutton option.

[Alex Chartier]

OK, so I have determined that the click event is not getting attached to the clear button. This event is attached in media/system/js/searchtools.js 

I have confirmed that the clear button is found and that the addEventListener is being called on it, but when I look in the dev tools the listener is not there. I compared the listeners attached to the clear button in com_menus against those in my component and see that the event is not attached in my component. 

Further analysis on going but if anyone has any ideas I would love to hear them.

[Alex Chartier]

OK, so I found the problem. The error was in the filter_emails.xml file, the field I have as state needs to be named fullordering for the searchtools.js to find it. What searchtools.js was doing was attaching the click event successfully to the Clear button, but later searched for the fullordering select list and when it did not find it it created one and then rebuilt the form which caused the event listener to get dropped.

[Alex Chartier]

A PR was done to the javascript to correct this issue and is now merged in the J4 branch.