[renderjs_ui] Search field in left panel has functional submit button

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_panel_js.js

@@ -118,7 +118,8 @@
           })
           .push(function (search_gadget) {
             return search_gadget.render({
-              focus: false
+              focus: false,
+              extended_search: ''
             });
           })
 
@@ -319,34 +320,45 @@
       return;
     })
 
-    .onEvent('submit', function () {
-      var gadget = this;
+    .onEvent('submit', function (event) {
+      var gadget = this,
+        redirect_options = {
+          page: "search"
+        };
 
       return gadget.getDeclaredGadget("erp5_searchfield")
         .push(function (search_gadget) {
           return search_gadget.getContent();
         })
         .push(function (data) {
-          var options = {
-            page: "search"
-          };
           if (data.search) {
-            options.extended_search = data.search;
+            redirect_options.extended_search = data.search;
           }
-          // Remove focus from the search field
-          document.activeElement.blur();
-          return gadget.redirect({command: 'display', options: options});
+          // don't redirect yet even when we have all necessary arguments
+          return gadget.getDeclaredGadget("erp5_searchfield");
+        })
+        .push(function (search_gadget) {
+          // we want the search field in side panel to be empty and blured
+          // but the state of the search gadget is still empty and blurred
+          // because the search gadget does not catch onSubmit
+          // thus we need to modify its state with the submitted values
+          // and then modify it back to nothing so the "nothing" gets rendered
+          return new RSVP.Queue()
+            .push(function () {
+              return search_gadget.render({
+                extended_search: redirect_options.extended_search,
+              });
+            })
+            .push(function () {
+              return search_gadget.render({
+                extended_search: ''
+              });
+            });
+        })
+        .push(function () {
+          return gadget.redirect({command: 'display', options: redirect_options});
         });
 
-    }, false, true)
-
-    .onEvent('blur', function (evt) {
-      // XXX Horrible hack to clear the search when focus is lost
-      // This does not follow renderJS design, as a gadget should not touch
-      // another gadget content
-      if (evt.target.type === 'search') {
-        evt.target.value = "";
-      }
-    }, true, false);
+    }, /*useCapture=*/false, /*preventDefault=*/true);
 
 }(window, document, rJS, Handlebars, RSVP, Node, loopEventListener));

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_panel_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>958.33121.48203.5614</string> </value>
+                <value> <string>960.63261.10188.49271</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1491816291.84</float>
+                        <float>1501172620.25</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_page_zuite/testPageSearchInputQuery.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>_bind_names</string> </key>
+            <value>
+              <object>
+                <klass>
+                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
+                </klass>
+                <tuple/>
+                <state>
+                  <dictionary>
+                    <item>
+                        <key> <string>_asgns</string> </key>
+                        <value>
+                          <dictionary>
+                            <item>
+                                <key> <string>name_subpath</string> </key>
+                                <value> <string>traverse_subpath</string> </value>
+                            </item>
+                          </dictionary>
+                        </value>
+                    </item>
+                  </dictionary>
+                </state>
+              </object>
+            </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>text/html</string> </value>
+        </item>
+        <item>
+            <key> <string>expand</string> </key>
+            <value> <int>0</int> </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>testPageSearchInputQuery</string> </value>
+        </item>
+        <item>
+            <key> <string>output_encoding</string> </key>
+            <value> <string>utf-8</string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <unicode></unicode> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_page_zuite/testPageSearchInputQuery.zpt

+<!-- Test inputting a search query 
+
+-  submit has to work using button with magnifying glass
+-  submit has to work on pressing enter <XXX how to do?>
+-  the search query has to appear above ListBox Field
+-  the search query has to dissapear from the panel's search input field
+-->
+
+<html xmlns:tal="http://xml.zope.org/namespaces/tal"
+      xmlns:metal="http://xml.zope.org/namespaces/metal">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>Test Page Search</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">Test Page Search</td></tr>
+</thead><tbody>
+<tal:block metal:use-macro="here/PTZuite_CommonTemplate/macros/init" />
+<tr>
+  <td>store</td>
+  <td>${base_url}/web_site_module/renderjs_runner/</td>
+  <td>runner_url</td>
+</tr>
+
+<tr>
+  <td>open</td>
+  <td>${runner_url}</td>
+  <td></td>
+</tr>
+
+<!-- Wait for gadget to be loaded -->
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-url='${runner_url}gadget_erp5_panel.html']//div[@data-gadget-url='${runner_url}gadget_erp5_searchfield.html']</td>
+  <td></td>
+</tr>
+<!-- Type search query and submit using button -->
+<tr>
+  <td>type</td>
+  <td>name=search</td>
+  <td>Title 1</td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//div[@data-gadget-url='${runner_url}gadget_erp5_panel.html']//div[@data-gadget-url='${runner_url}gadget_erp5_searchfield.html']//button[@type='submit']</td>
+  <td></td>
+</tr>
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
+
+<!-- Verify that panel search query is empty but main search input is not --> 
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-url='${runner_url}gadget_erp5_panel.html']//div[@data-gadget-url='${runner_url}gadget_erp5_searchfield.html']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>verifyValue</td>
+  <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>
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file