[erp5_web_renderjs_ui] Improve search field rendering to hide low level query parameters

SearchField: keep the last full text parameter editable Allow to focus on a specific input Searchfield: use an hidden field to store the parsed value (to simplify test code) Display full text queries as much as possible in raw format

[erp5_web_renderjs_ui] Improve search field rendering to hide low level query parameters
SearchField: keep the last full text parameter editable Allow to focus on a specific input Searchfield: use an hidden field to store the parsed value (to simplify test code) Display full text queries as much as possible in raw format
f6786bbb · Romain Courteaud · 20b78cfe · f6786bbb · f6786bbb · f6786bbb
Commit f6786bbb authored Nov 29, 2017 by Romain Courteaud
37 changed files
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js
@@ -465,7 +465,7 @@
    .allowPublicAcquisition("triggerSubmit", function (param_list) {
      return this.getDeclaredGadget(MAIN_SCOPE)
        .push(function (main_gadget) {
-          return main_gadget.triggerSubmit(param_list);
+          return main_gadget.triggerSubmit.apply(main_gadget, param_list);
        });
    })
    /////////////////////////////////////////////////////////////////

--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml
@@ -216,7 +216,7 @@
            </item>
            <item>
                <key> <string>actor</string> </key>
-                <value> <string>vincent</string> </value>
+                <value> <string>zope</string> </value>
            </item>
            <item>
                <key> <string>comment</string> </key>
@@ -230,7 +230,7 @@
            </item>
            <item>
                <key> <string>serial</string> </key>
-                <value> <string>963.7551.15104.28279</string> </value>
+                <value> <string>963.29105.23200.50073</string> </value>
            </item>
            <item>
                <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                    </tuple>
                    <state>
                      <tuple>
-                        <float>1509376504.09</float>
+                        <float>1511971674.78</float>
                        <string>UTC</string>
                      </tuple>
                    </state>

--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
@@ -1221,6 +1221,21 @@ div[data-gadget-scope='erp5_searchfield'] .ui-input-text div[data-gadget-scope='
 div[data-gadget-scope='erp5_searchfield'] button {
  padding: 3pt;
 }
+div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value {
+  display: flex;
+  flex-direction: row;
+}
+div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button {
+  border: 1px solid rgba(0, 0, 0, 0.14);
+  border-radius: 0.325em;
+  margin-right: 6pt;
+  max-width: 6em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  -ms-text-overflow: ellipsis;
+}
 .document_table .ui-table-header {
  display: flex;
  padding-bottom: 6pt;

--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
@@ -242,7 +242,7 @@
            </item>
            <item>
                <key> <string>serial</string> </key>
-                <value> <string>962.1204.63259.57958</string> </value>
+                <value> <string>963.49524.2871.19182</string> </value>
            </item>
            <item>
                <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                    </tuple>
                    <state>
                      <tuple>
-                        <float>1505133981.01</float>
+                        <float>1512052879.86</float>
                        <string>UTC</string>
                      </tuple>
                    </state>

--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.js
@@ -122,9 +122,13 @@

    })

-    .declareMethod('triggerSubmit', function () {
+    .declareMethod('triggerSubmit', function (options) {
      var gadget = this,
-        extended_search = '';
+        extended_search = '',
+        focus_on;
+      if (options !== undefined) {
+        focus_on = options.focus_on;
+      }
      return gadget.getDeclaredGadget("erp5_searchfield")
        .push(function (search_gadget) {
          return search_gadget.getContent();
@@ -141,7 +145,8 @@
          return gadget.renderEditorPanel("gadget_erp5_search_editor.html", {
            extended_search: extended_search,
            begin_from: result.begin_from,
-            search_column_list: result.search_column_list
+            search_column_list: result.search_column_list,
+            focus_on: focus_on
          });
        });
    })

--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.xml
@@ -230,7 +230,7 @@
            </item>
            <item>
                <key> <string>serial</string> </key>
-                <value> <string>962.35929.60572.59682</string> </value>
+                <value> <string>963.51100.33598.65024</string> </value>
            </item>
            <item>
                <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                    </tuple>
                    <state>
                      <tuple>
-                        <float>1507808130.77</float>
+                        <float>1511973554.81</float>
                        <string>UTC</string>
                      </tuple>
                    </state>

--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searcheditor_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searcheditor_js.js
@@ -258,7 +258,8 @@
        // [{key: 'title', value: 'Foo', operator: 'like'}]
        query_list: query_list,
        // and/or
-        operator: operator
+        operator: operator,
+        focus_on: options.focus_on
      });
    })

@@ -295,14 +296,17 @@
          }

          container.appendChild(div);
-          return gadget.focusOnLastInput();
+          return gadget.focusOnLastInput(gadget.state.focus_on);
        });
    })

-    .declareJob('focusOnLastInput', function () {
+    .declareJob('focusOnLastInput', function (index) {
      var input_list = this.element.querySelectorAll('input');
+      if (index === undefined) {
+        index = input_list.length - 1;
+      }
      if (input_list.length) {
-        input_list[input_list.length - 1].focus();
+        input_list[index].focus();
      }
    })


--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searcheditor_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searcheditor_js.xml
@@ -230,7 +230,7 @@
            </item>
            <item>
                <key> <string>serial</string> </key>
-                <value> <string>963.48038.37111.52804</string> </value>
+                <value> <string>963.51105.27338.14557</string> </value>
            </item>
            <item>
                <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                    </tuple>
                    <state>
                      <tuple>
-                        <float>1511789322.9</float>
+                        <float>1511973485.97</float>
                        <string>UTC</string>
                      </tuple>
                    </state>

--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_html.html
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_html.html
@@ -15,6 +15,7 @@
  </head>
  <body>
     <div class="ui-input-text ui-input-has-icon ui-corner-all ui-shadow-inset ui-input-has-clear">
+       <div class="search_parsed_value"></div>
       <div data-gadget-url="gadget_html5_input.html"
              data-gadget-scope="input"
              data-gadget-sandbox="public"></div>

--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_html.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_html.xml
@@ -234,7 +234,7 @@
            </item>
            <item>
                <key> <string>serial</string> </key>
-                <value> <string>954.5699.4335.63061</string> </value>
+                <value> <string>963.49338.26158.25821</string> </value>
            </item>
            <item>
                <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                    </tuple>
                    <state>
                      <tuple>
-                        <float>1474550671.81</float>
+                        <float>1512052715.45</float>
                        <string>UTC</string>
                      </tuple>
                    </state>

--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.js
-/*global window, rJS */
+/*global window, rJS, document, Node,
+         QueryFactory, SimpleQuery, ComplexQuery, Query*/
 /*jslint nomen: true, indent: 2, maxerr: 3 */
-(function (window, rJS) {
+(function (window, rJS, document, Node,
+           QueryFactory, SimpleQuery, ComplexQuery, Query) {
  "use strict";

+  function convertQueryToSearchText(query) {
+    return Query.objectToSearchText(query);
+  }
+
+  function convertFullTextQueryListToSearchText(full_text_query_list) {
+    // jio objectToSearchText explicitely add all operators
+    // replace it for now and drop operators if not needed
+    var i,
+      len = full_text_query_list.length,
+      result_list = [];
+    for (i = 0; i < len; i += 1) {
+      if (full_text_query_list[i].value.indexOf(' ') === -1) {
+        result_list.push(full_text_query_list[i].value);
+      } else {
+        result_list.push(convertQueryToSearchText(full_text_query_list[i]));
+      }
+    }
+    return result_list.join(' ');
+  }
+
  rJS(window)
    /////////////////////////////////////////////////////////////////
    // declared methods
@@ -12,17 +34,102 @@
        extended_search: options.extended_search || "",
        focus: options.focus
      };
-
      return this.changeState(state_dict);
    })

    .onStateChange(function () {
-      var gadget = this;
+      var gadget = this,
+        i,
+        len,
+        button_container = gadget.element.querySelector('div.search_parsed_value'),
+        button,
+        operator = 'AND',
+        jio_query_list = [],
+        query_text_list = [],
+        full_text_query_list = [],
+        jio_query,
+        sub_jio_query,
+        parsed_value = '',
+        input_value = '',
+        continue_full_text_query_search = true;
+
+      if (gadget.state.extended_search) {
+        // Parse the raw query
+        try {
+          jio_query = QueryFactory.create(gadget.state.extended_search);
+        } catch (error) {
+          // it catch all error, not only search criteria invalid error
+          // Keep the value as is, to display it to the user
+          input_value = gadget.state.extended_search;
+        }
+
+        if (jio_query instanceof SimpleQuery) {
+          query_text_list.push(jio_query.value);
+          jio_query_list.push(jio_query);
+        } else if (jio_query instanceof ComplexQuery) {
+          len = jio_query.query_list.length;
+          operator = jio_query.operator;
+          for (i = 0; i < len; i += 1) {
+            sub_jio_query = jio_query.query_list[i];
+            jio_query_list.push(sub_jio_query);
+            if (sub_jio_query instanceof SimpleQuery) {
+              query_text_list.push(sub_jio_query.value);
+            } else {
+              query_text_list.push('complex');
+            }
+          }
+        }
+
+        // If last queries are full text queries, keep them in the input field
+        if (jio_query_list.length) {
+          while (continue_full_text_query_search) {
+            jio_query = jio_query_list[jio_query_list.length - 1];
+            if ((operator === 'AND') && (jio_query instanceof SimpleQuery) && (!jio_query.key)) {
+              // drop last array element
+              full_text_query_list.unshift(jio_query_list[jio_query_list.length - 1]);
+              jio_query_list = jio_query_list.slice(0, -1);
+              query_text_list = query_text_list.slice(0, -1);
+              if (!jio_query_list.length) {
+                continue_full_text_query_search = false;
+              }
+            } else {
+              continue_full_text_query_search = false;
+            }
+          }
+
+          if (full_text_query_list.length) {
+            input_value = convertFullTextQueryListToSearchText(full_text_query_list);
+          }
+          if (jio_query_list.length === 1) {
+            parsed_value = convertQueryToSearchText(jio_query_list[0]);
+          } else if (jio_query_list.length > 1) {
+            parsed_value = convertQueryToSearchText(new ComplexQuery({
+              operator: operator,
+              query_list: jio_query_list,
+              type: "complex"
+            }));
+          }
+        }
+      }
+
+      button_container.innerHTML = '';
+      len = query_text_list.length;
+      for (i = 0; i < len; i += 1) {
+        button = document.createElement('button');
+        button.textContent = query_text_list[i];
+        button.value = i;
+        button_container.appendChild(button);
+      }
+      button = document.createElement('input');
+      button.setAttribute("type", "hidden");
+      button.value = parsed_value;
+      button_container.appendChild(button);
+
      return gadget.getDeclaredGadget('input')
        .push(function (input_gadget) {
          return input_gadget.render({
            type: "search",
-            value: gadget.state.extended_search,
+            value: input_value,
            name: "search",
            editable: true
          });
@@ -32,17 +139,72 @@
    .allowPublicAcquisition("notifyValid", function () {return; })

    .declareMethod('getContent', function () {
+      var gadget = this;
      return this.getDeclaredGadget('input')
        .push(function (input_gadget) {
          return input_gadget.getContent();
        })
        .push(function (result) {
+          var content_dict = {search: ''},
+            jio_query_list = [],
+            jio_query,
+            operator = 'AND',
+            hidden_input = gadget.element.querySelector('input');
+          // Start from the original query
+          if (hidden_input.value) {
+            // Parse error is not supposed to happen, as hidden_input has been parsed already
+            jio_query = QueryFactory.create(hidden_input.value);
+            if (jio_query instanceof SimpleQuery) {
+              jio_query_list.push(jio_query);
+            } else if (jio_query instanceof ComplexQuery) {
+              jio_query_list = jio_query.query_list;
+              operator = jio_query.operator;
+            }
+          }
+
          if (result.search) {
+            jio_query = undefined;
            // XXX trim from input gadget?
-            result.search = result.search.trim();
+            try {
+              jio_query = QueryFactory.create(result.search.trim());
+            } catch (error) {
+              // it catch all error, not only search criteria invalid error
+              // Consider the string as a full text only in this case
+              // to keep it displayed to the user
+              jio_query = new SimpleQuery({value: result.search.trim()});
+            }
+            if ((jio_query_list.length === 0) && (jio_query instanceof ComplexQuery)) {
+              jio_query_list = jio_query.query_list;
+              operator = jio_query.operator;
+            } else if (jio_query !== undefined) {
+              jio_query_list.push(jio_query);
+            }
          }
-          return result;
+
+          if (jio_query_list.length === 1) {
+            content_dict.search = convertQueryToSearchText(jio_query_list[0]);
+          } else if (jio_query_list.length > 1) {
+            content_dict.search = convertQueryToSearchText(new ComplexQuery({
+              operator: operator,
+              query_list: jio_query_list,
+              type: "complex"
+            }));
+          }
+
+          return content_dict;
        });
-    });
+    })
+
+    .declareAcquiredMethod("triggerSubmit", "triggerSubmit")
+    .onEvent('click', function (evt) {
+      if ((evt.target.nodeType === Node.ELEMENT_NODE) &&
+          (evt.target.tagName === 'BUTTON') &&
+          (evt.target.value)) {
+        // Open the filter panel if one 'search' button is clicked
+        evt.preventDefault();
+        return this.triggerSubmit({focus_on: parseInt(evt.target.value, 10)});
+      }
+    }, false, false);

-}(window, rJS));
\ No newline at end of file
+}(window, rJS, document, Node,
+  QueryFactory, SimpleQuery, ComplexQuery, Query));
\ No newline at end of file
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.xml
@@ -230,7 +230,7 @@
            </item>
            <item>
                <key> <string>serial</string> </key>
-                <value> <string>963.11788.48702.26146</string> </value>
+                <value> <string>963.59679.1954.25241</string> </value>
            </item>
            <item>
                <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                    </tuple>
                    <state>
                      <tuple>
-                        <float>1510737538.87</float>
+                        <float>1512408075.41</float>
                        <string>UTC</string>
                      </tuple>
                    </state>

--- a/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
+++ b/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
@@ -1409,6 +1409,24 @@ div[data-gadget-scope='erp5_searchfield'] {
  button {
    padding: @half-margin-size;
  }
+  div.search_parsed_value {
+    display: flex;
+    flex-direction: row;
+    button {
+      // padding: @half-margin-size;
+      border: 1px solid rgba(0, 0, 0, 0.14);
+      border-radius: @radius;
+
+      margin-right: @margin-size;
+      max-width: 6em;
+      // Do not put title on multi line in case of small screen
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -o-text-overflow: ellipsis;
+      -ms-text-overflow: ellipsis;
+    }
+  }
 }

 .document_table {

--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testComplexFilter.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testComplexFilter.zpt
@@ -91,7 +91,8 @@
  <td>link=Title 2</td>
  <td></td>
 </tr>
-<tal:block tal:define="search_query python: '( id:&nbsp; &#34;0&#34; AND title:&nbsp; &#34;Title 2&#34; )'">
+<tal:block tal:define="parsed_query python: '( id:&nbsp; &#34;0&#34; AND title:&nbsp; &#34;Title 2&#34; )';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -115,7 +116,8 @@
  <td>link=Title 2</td>
  <td></td>
 </tr>
-<tal:block tal:define="search_query python: '( id:&nbsp; &#34;0&#34; OR title:&nbsp; &#34;Title 2&#34; )'">
+<tal:block tal:define="parsed_query python: '( id:&nbsp; &#34;0&#34; OR title:&nbsp; &#34;Title 2&#34; )';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -132,7 +134,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />

 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
-<tal:block tal:define="search_query python: ''">
+<tal:block tal:define="search_query python: '';
+                       parsed_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilter.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilter.zpt
@@ -88,7 +88,8 @@
  <td>link=Title 0</td>
  <td></td>
 </tr>
-<tal:block tal:define="search_query python: '( id:&nbsp; &#34;0&#34; )'">
+<tal:block tal:define="parsed_query python: 'id:&nbsp; &#34;0&#34;';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -126,7 +127,8 @@
  <td>link=Title 0</td>
  <td></td>
 </tr>
-<tal:block tal:define="search_query python: '( title:&nbsp; &#34;T%&#34; )'">
+<tal:block tal:define="parsed_query python: 'title:&nbsp; &#34;T%&#34;';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -140,7 +142,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />

 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
-<tal:block tal:define="search_query python: ''">
+<tal:block tal:define="search_query python: '';
+                       parsed_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterBadGrammar.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterBadGrammar.zpt
@@ -54,13 +54,17 @@

 <!-- Open the panel and submit it. Check that the new query string is not to much changed -->
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/triggle_filter_and" />
-<tal:block tal:define="filter_section_configuration python: {'key': 'RAW', 'value': 'AND OR', 'index': 0}">
+<tal:block tal:define="filter_section_configuration python: {'key': 'TEXT', 'value': 'AND OR', 'index': 0}">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_filter_section" />
 </tal:block>
+<tal:block tal:define="filter_section_configuration python: {'key': 'RAW', 'value': 'AND OR', 'index': 0}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/set_filter_section" />
+</tal:block>
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />

-<tal:block tal:define="search_query python: ''">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterItemAutoBuild.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterItemAutoBuild.zpt
@@ -65,7 +65,8 @@

 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
-<tal:block tal:define="search_query python: '( id:&nbsp; &#34;0&#34; AND title:&nbsp; &#34;Title 2&#34; )'">
+<tal:block tal:define="parsed_query python: '( id:&nbsp; &#34;0&#34; AND title:&nbsp; &#34;Title 2&#34; )';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -91,7 +92,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />

 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
-<tal:block tal:define="search_query python: '( id:&nbsp; &#34;0&#34; OR title:&nbsp; &#34;Title 2&#34; )'">
+<tal:block tal:define="parsed_query python: '( id:&nbsp; &#34;0&#34; OR title:&nbsp; &#34;Title 2&#34; )';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -123,7 +125,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />

 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
-<tal:block tal:define="search_query python: ''">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterItemDelete.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterItemDelete.zpt
@@ -61,7 +61,8 @@

 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
-<tal:block tal:define="search_query python: '( id:&nbsp; &#34;0&#34; OR title:&nbsp; &#34;Title 2&#34; )'">
+<tal:block tal:define="parsed_query python: '( id:&nbsp; &#34;0&#34; OR title:&nbsp; &#34;Title 2&#34; )';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -76,7 +77,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />

 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
-<tal:block tal:define="search_query python: ''">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterNotSupportedOperator.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterNotSupportedOperator.zpt
@@ -60,7 +60,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />

-<tal:block tal:define="search_query python: '( id: > &#34;1&#34; )'">
+<tal:block tal:define="parsed_query python: 'id: > &#34;1&#34;';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -70,7 +71,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />

-<tal:block tal:define="search_query python: '( id: > &#34;1&#34; )'">
+<tal:block tal:define="parsed_query python: 'id: > &#34;1&#34;';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -80,7 +82,8 @@
 </tal:block>
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
-<tal:block tal:define="search_query python: ''">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterSubComplexQuery.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterSubComplexQuery.zpt
@@ -63,7 +63,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />

-<tal:block tal:define="search_query python: '( id: &nbsp;&#34;1&#34; OR ( id: &nbsp;&#34;2&#34; AND id: &nbsp;&#34;3&#34; ) )'">
+<tal:block tal:define="parsed_query python: '( id: &nbsp;&#34;1&#34; OR ( id: &nbsp;&#34;2&#34; AND id: &nbsp;&#34;3&#34; ) )';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -73,7 +74,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />

-<tal:block tal:define="search_query python: '( id: &nbsp;&#34;1&#34; OR ( id: &nbsp;&#34;2&#34; AND id: &nbsp;&#34;3&#34; ) )'">
+<tal:block tal:define="parsed_query python: '( id: &nbsp;&#34;1&#34; OR ( id: &nbsp;&#34;2&#34; AND id: &nbsp;&#34;3&#34; ) )';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -86,7 +88,8 @@
 </tal:block>
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
-<tal:block tal:define="search_query python: ''">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterSupportedOperator.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterSupportedOperator.zpt
@@ -60,7 +60,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />

-<tal:block tal:define="search_query python: '( quantity: > &#34;2&#34; )'">
+<tal:block tal:define="parsed_query python: 'quantity: > &#34;2&#34;';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -70,7 +71,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />

-<tal:block tal:define="search_query python: '( quantity: > &#34;2&#34; )'">
+<tal:block tal:define="parsed_query python: 'quantity: > &#34;2&#34;';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -80,7 +82,8 @@
 </tal:block>
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
-<tal:block tal:define="search_query python: ''">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterUnknownKey.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterUnknownKey.zpt
@@ -60,7 +60,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />

-<tal:block tal:define="search_query python: '( foo: &nbsp;&#34;31085&#34; )'">
+<tal:block tal:define="parsed_query python: 'foo: &nbsp;&#34;31085&#34;';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -70,7 +71,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />

-<tal:block tal:define="search_query python: '( foo: &nbsp;&#34;31085&#34; )'">
+<tal:block tal:define="parsed_query python: 'foo: &nbsp;&#34;31085&#34;';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -80,7 +82,8 @@
 </tal:block>
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
-<tal:block tal:define="search_query python: ''">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterWithPager.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterWithPager.zpt
@@ -87,7 +87,8 @@
  <td></td>
 </tr>

-<tal:block tal:define="search_query python: '( id:&nbsp; &#34;0&#34; OR id:&nbsp; &#34;1&#34; OR id:&nbsp; &#34;2&#34; OR id:&nbsp; &#34;3&#34; )'">
+<tal:block tal:define="parsed_query python: '( id:&nbsp; &#34;0&#34; OR id:&nbsp; &#34;1&#34; OR id:&nbsp; &#34;2&#34; OR id:&nbsp; &#34;3&#34; )';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -158,7 +159,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />

 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
-<tal:block tal:define="search_query python: ''">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterWithPreviousNext.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testFilterWithPreviousNext.zpt
@@ -69,7 +69,8 @@
  <td>link=Title 0</td>
  <td></td>
 </tr>
-<tal:block tal:define="search_query python: '( id:&nbsp; &#34;0&#34; )'">
+<tal:block tal:define="parsed_query python: 'id:&nbsp; &#34;0&#34;';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>

@@ -113,7 +114,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />

 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
-<tal:block tal:define="search_query python: ''">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testListboxResetParameter.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testListboxResetParameter.zpt
@@ -150,7 +150,8 @@
  <td></td>
 </tr>

-<tal:block tal:define="search_query python: ''">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: ''">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_page_templates_zuite/testFormListSearchResetsPagination.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_page_templates_zuite/testFormListSearchResetsPagination.zpt
@@ -85,11 +85,10 @@
  <td>//span[@data-i18n='Records 1 - 3']</td>
  <td></td>
 </tr>
-<tr>
-  <td>assertElementPresent</td>
-  <td>//input[@name='search' and @value='%']</td>
-  <td></td>
-</tr>
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: '%'">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
+</tal:block>
 <tr>
  <td>click</td>
  <td>//a[@data-i18n='Next']</td>
@@ -100,11 +99,10 @@
  <td>//span[@data-i18n='Records 4 - 6']</td>
  <td></td>
 </tr>
-<tr>
-  <td>assertElementPresent</td>
-  <td>//input[@name='search' and @value='%']</td>
-  <td></td>
-</tr>
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: '%'">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
+</tal:block>

 </tbody></table>
 </body>

--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_page_zuite/testPageJumpLinkList.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_page_zuite/testPageJumpLinkList.zpt
@@ -55,7 +55,7 @@
 </tr>
 <tr>
  <td>assertElementPresent</td>
-  <td>//input[contains(@value, 'portal_type:"Query" AND default_agent_uid:') and @name='search']</td>
+  <td>//input[contains(@value, '( portal_type:&nbsp; "Query" AND default_agent_uid:&nbsp; ') and @type='hidden']</td>
  <td></td>
 </tr>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_page_zuite/testPageSearchInputQuery.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_page_zuite/testPageSearchInputQuery.zpt
@@ -60,11 +60,10 @@
  <td>//div[@data-gadget-url='${runner_url}gadget_erp5_panel.html']//div[@data-gadget-url='${runner_url}gadget_erp5_searchfield.html']//input[@name='search']</td>
  <td></td>
 </tr>
-<tr>
-  <td>verifyValue</td>
-  <td>//div[@role="main"]//div[@data-gadget-url='${runner_url}gadget_erp5_searchfield.html']//input[@name='search']</td>
-  <td>Title 1</td>
-</tr>
+<tal:block tal:define="search_query python: 'Title 1';
+                       parsed_query python: ''">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
+</tal:block>

 </tbody></table>
 </body>

--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_page_zuite/testPageWorklistNoLocalRoles.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_page_zuite/testPageWorklistNoLocalRoles.zpt
@@ -48,11 +48,10 @@
  <td>//div[@data-gadget-url='${base_url}/web_site_module/renderjs_runner/gadget_erp5_pt_form_list.html']</td>
  <td></td>
 </tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//div[@data-gadget-scope='erp5_searchfield']//input[@value='portal_type:("Bar" OR "Foo") AND simulation_state:"draft"' and @type='search' and @name='search']</td>
-  <td></td>
-</tr>
+<tal:block tal:define="search_query python: '';
+                       parsed_query python: '( ( portal_type:&nbsp; &#34;Bar&#34; OR portal_type:&nbsp; &#34;Foo&#34; ) AND simulation_state:&nbsp; &#34;draft&#34; )'">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
+</tal:block>

 </tbody></table>
 </body>

--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_relation_field_zuite/testMultiRelationFieldSearchWithListbox.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_relation_field_zuite/testMultiRelationFieldSearchWithListbox.zpt
@@ -231,8 +231,18 @@
  <td></td>
 </tr>

+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/triggle_filter_and" />
+<tal:block tal:define="filter_section_configuration python: {'index': 0}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/remove_filter_section" />
+</tal:block>
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
+
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: ''">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
+</tal:block>

-<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/clear_query" />

 <tr>
  <td>click</td>

--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_relation_field_zuite/testProxyListBox.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_relation_field_zuite/testProxyListBox.zpt
@@ -245,7 +245,17 @@
  <td></td>
 </tr>

-<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/clear_query" />
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/triggle_filter_and" />
+<tal:block tal:define="filter_section_configuration python: {'index': 0}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/remove_filter_section" />
+</tal:block>
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
+
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: ''">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
+</tal:block>

 <tr>
  <td>waitForElementPresent</td>

--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_relation_field_zuite/testRelationFieldSearchWithListbox.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_relation_field_zuite/testRelationFieldSearchWithListbox.zpt
@@ -164,7 +164,17 @@
  <td></td>
 </tr>

-<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/clear_query" />
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/triggle_filter_and" />
+<tal:block tal:define="filter_section_configuration python: {'index': 0}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/remove_filter_section" />
+</tal:block>
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
+
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: ''">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
+</tal:block>

 <tr>
  <td>waitForElementPresent</td>

--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_router_zuite/testCommandDisplayStoredStateJumpToLatestDocumentContext.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_router_zuite/testCommandDisplayStoredStateJumpToLatestDocumentContext.zpt
@@ -26,7 +26,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />

 <!-- Enter a search query to store the state -->
-<tal:block tal:define="search_query python: 'title'">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: 'title'">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/search_in_form_list" />
 </tal:block>

@@ -74,7 +75,8 @@
 </tr>

 <!-- Wait for gadget to be loaded -->
-<tal:block tal:define="search_query python: 'title'">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: 'title'">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_router_zuite/testCommandHistoryPreviousJumpToPreviousContext.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_router_zuite/testCommandHistoryPreviousJumpToPreviousContext.zpt
@@ -30,7 +30,8 @@
 </tr>

 <!-- Enter a search query to create a selection parameter -->
-<tal:block tal:define="search_query python: 'title'">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: 'title'">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/search_in_form_list" />
 </tal:block>

@@ -140,7 +141,8 @@
  <td></td>
 </tr>

-<tal:block tal:define="search_query python: 'title'">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: 'title'">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>


--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_router_zuite/testCommandSelectionNextLastElement.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_router_zuite/testCommandSelectionNextLastElement.zpt
@@ -30,7 +30,8 @@
 </tr>

 <!-- Enter a search query to create a selection parameter -->
-<tal:block tal:define="search_query python: 'title'">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: 'title'">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/search_in_form_list" />
 </tal:block>

@@ -73,7 +74,8 @@
  <td>Foos</td>
  <td></td>
 </tr>
-<tal:block tal:define="search_query python: 'title'">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: 'title'">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>
 <tr>

--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_router_zuite/testCommandSelectionPreviousFirstElement.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_router_zuite/testCommandSelectionPreviousFirstElement.zpt
@@ -30,7 +30,8 @@
 </tr>

 <!-- Enter a search query to create a selection parameter -->
-<tal:block tal:define="search_query python: 'title'">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: 'title'">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/search_in_form_list" />
 </tal:block>
 <tr>
@@ -77,7 +78,8 @@
  <td>Foos</td>
  <td></td>
 </tr>
-<tal:block tal:define="search_query python: 'title'">
+<tal:block tal:define="parsed_query python: '';
+                       search_query python: 'title'">
  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
 </tal:block>
 <tr>

--- a/bt5/erp5_web_renderjs_ui_test/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui_test/Zuite_CommonTemplateForRenderjsUi.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui_test/Zuite_CommonTemplateForRenderjsUi.zpt
@@ -199,13 +199,18 @@

  <tal:block metal:define-macro="check_search_in_form_list">
    <tr>
-      <td colspan="3"><b tal:content="python: 'Check the search query: %s' % search_query"></b></td>
+      <td colspan="3"><b tal:content="python: 'Check the search query: %s %s' % (parsed_query, search_query)"></b></td>
    </tr>
    <tr>
      <td>waitForElementPresent</td>
      <td>//div[contains(@data-gadget-url, 'gadget_erp5_pt_form_list.html')]//div[@data-gadget-scope='erp5_searchfield']//input[@name='search']</td>
      <td></td>
    </tr>
+    <tr>
+      <td>assertValue</td>
+      <td>//div[contains(@data-gadget-url, 'gadget_erp5_pt_form_list.html')]//div[@data-gadget-scope='erp5_searchfield']//input[@type='hidden']</td>
+      <td tal:content="parsed_query"></td>
+    </tr>
    <tr>
      <td>assertValue</td>
      <td>//div[contains(@data-gadget-url, 'gadget_erp5_pt_form_list.html')]//div[@data-gadget-scope='erp5_searchfield']//input[@name='search' and @type='search']</td>