erp5_web_renderjs_ui: enable keyboard to navigate relation field menu

some improvements:
- use xpath expression in test instead of complex eval expression
- use classList instead of className

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_js.js

@@ -510,6 +510,7 @@
         data_explore,
         new_state = {},
         tag_name = evt.target.tagName.toLowerCase();
+
       if (tag_name === 'button') {
         // Go to the search listbox
         return redirectToTheSearchListbox(gadget);
@@ -557,7 +558,7 @@
       if (evt.key === "ArrowDown" || evt.key === "ArrowUp") {
         if (ul.childNodes.length > 0) {
           for (i = 0; i < ul.childNodes.length; i += 1) {
-            if (ul.childNodes[i].className.endsWith('active')) {
+            if (ul.childNodes[i].classList.contains('active')) {
               active_index = i;
             }
           }
@@ -582,14 +583,12 @@
           }
           for (i = 0; i < ul.childNodes.length; i += 1) {
             if (i === active_index) {
-              if (!ul.childNodes[i].className.endsWith("active")) {
-                ul.childNodes[i].className = ul.childNodes[i].className +
-                  " active";
+              if (!ul.childNodes[i].classList.contains('active')) {
+                ul.childNodes[i].classList.add('active');
               }
             } else {
-              if (ul.childNodes[i].className.endsWith("active")) {
-                ul.childNodes[i].className = ul.childNodes[i].className.replace(
-                  " active", "");
+              if (ul.childNodes[i].classList.contains('active')) {
+                ul.childNodes[i].classList.remove('active');
               }
             }
           }
@@ -597,7 +596,7 @@
         }
       } else if (evt.key === "Enter") {
         for (i = 0; i < ul.childNodes.length; i += 1) {
-          if (ul.childNodes[i].className.endsWith('active')) {
+          if (ul.childNodes[i].classList.contains('active')) {
             next_event = new MouseEvent('click', {
               view: window,
               bubbles: true,
@@ -618,13 +617,11 @@
                    ul = gadget.element.querySelector(".search_ul");
       if (evt.target.tagName.toLowerCase() === 'li') {
         for (i = 0; i < ul.childNodes.length; i += 1) {
-          ul.childNodes[i].className = ul.childNodes[i].className.replace(
-            " active", "");
+          ul.childNodes[i].classList.remove('active');
         }
-        evt.target.className = evt.target.className + " active";
+        evt.target.classList.add('active');
       }
     }, true, false)
-
     .declareAcquiredMethod("notifyBlur", "notifyBlur")
     .onEvent('blur', function (evt) {
       var gadget = this;

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_relation_field_zuite/testRelationFieldArrowKeys.xml

@@ -11,9 +11,13 @@
             <value>
               <object>
                 <klass>
-                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
+                  <global name="_reconstructor" module="copy_reg"/>
                 </klass>
-                <tuple/>
+                <tuple>
+                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
+                  <global name="object" module="__builtin__"/>
+                  <none/>
+                </tuple>
                 <state>
                   <dictionary>
                     <item>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_relation_field_zuite/testRelationFieldArrowKeys.zpt

@@ -77,14 +77,14 @@
 <!-- We have class "active" for every line that should be highlighted -->
 <!-- Initially, no lines are highlighted -->
 <tr>
-  <td>assertEval</td>
-  <td>(function() {return selenium.browserbot.getCurrentWindow().document.querySelector("input[name='field_my_foo_category_title']").parentNode.querySelectorAll('li')[0].className.endsWith("active")})()
-  <td>false</td>
+  <td>assertElementNotPresent</td>
+  <td>//input[@name='field_my_foo_category_title']/parent::*//li[position()=1 and contains(@class,'active')]</td>
+  <td></td>
 </tr>
 <tr>
-  <td>assertEval</td>
-  <td>(function() {return selenium.browserbot.getCurrentWindow().document.querySelector("input[name='field_my_foo_category_title']").parentNode.querySelectorAll('li')[1].className.endsWith("active")})()
-  <td>false</td>
+  <td>assertElementNotPresent</td>
+  <td>//input[@name='field_my_foo_category_title']/parent::*//li[position()=2 and contains(@class,'active')]</td>
+  <td></td>
 </tr>
 <!-- We do Arrow down key, then first line should be highlighted -->
 <tr>
@@ -94,14 +94,19 @@
   <td>true</td>
 </tr>
 <tr>
-  <td>assertEval</td>
-  <td>(function() {return selenium.browserbot.getCurrentWindow().document.querySelector("input[name='field_my_foo_category_title']").parentNode.querySelectorAll('li')[0].className.endsWith("active")})()
-  <td>true</td>
+  <td>waitForElementPresent</td>
+  <td>//input[@name='field_my_foo_category_title']/parent::*//li[position()=1 and contains(@class,'active')]</td>
+  <td></td>
 </tr>
 <tr>
-  <td>assertEval</td>
-  <td>(function() {return selenium.browserbot.getCurrentWindow().document.querySelector("input[name='field_my_foo_category_title']").parentNode.querySelectorAll('li')[1].className.endsWith("active")})()
-  <td>false</td>
+  <td>assertElementPresent</td>
+  <td>//input[@name='field_my_foo_category_title']/parent::*//li[position()=1 and contains(@class,'active')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementNotPresent</td>
+  <td>//input[@name='field_my_foo_category_title']/parent::*//li[position()=2 and contains(@class,'active')]</td>
+  <td></td>
 </tr>
 <!-- We do Arrow down key again, then second line should be highlighted -->
 <tr>
@@ -111,14 +116,19 @@
   <td>true</td>
 </tr>
 <tr>
-  <td>assertEval</td>
-  <td>(function() {return selenium.browserbot.getCurrentWindow().document.querySelector("input[name='field_my_foo_category_title']").parentNode.querySelectorAll('li')[0].className.endsWith("active")})()
-  <td>false</td>
+  <td>waitForElementPresent</td>
+  <td>//input[@name='field_my_foo_category_title']/parent::*//li[position()=2 and contains(@class,'active')]</td>
+  <td></td>
 </tr>
 <tr>
-  <td>assertEval</td>
-  <td>(function() {return selenium.browserbot.getCurrentWindow().document.querySelector("input[name='field_my_foo_category_title']").parentNode.querySelectorAll('li')[1].className.endsWith("active")})()
-  <td>true</td>
+  <td>assertElementNotPresent</td>
+  <td>//input[@name='field_my_foo_category_title']/parent::*//li[position()=1 and contains(@class,'active')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//input[@name='field_my_foo_category_title']/parent::*//li[position()=2 and contains(@class,'active')]</td>
+  <td></td>
 </tr>
 <!-- We do Arrow up key, then first line should be highlighted -->
 <tr>
@@ -128,14 +138,19 @@
   <td>true</td>
 </tr>
 <tr>
-  <td>assertEval</td>
-  <td>(function() {return selenium.browserbot.getCurrentWindow().document.querySelector("input[name='field_my_foo_category_title']").parentNode.querySelectorAll('li')[1].className.endsWith("active")})()
-  <td>false</td>
+  <td>waitForElementPresent</td>
+  <td>//input[@name='field_my_foo_category_title']/parent::*//li[position()=1 and contains(@class,'active')]</td>
+  <td></td>
 </tr>
 <tr>
-  <td>assertEval</td>
-  <td>(function() {return selenium.browserbot.getCurrentWindow().document.querySelector("input[name='field_my_foo_category_title']").parentNode.querySelectorAll('li')[0].className.endsWith("active")})()
-  <td>true</td>
+  <td>assertElementPresent</td>
+  <td>//input[@name='field_my_foo_category_title']/parent::*//li[position()=1 and contains(@class,'active')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementNotPresent</td>
+  <td>//input[@name='field_my_foo_category_title']/parent::*//li[position()=2 and contains(@class,'active')]</td>
+  <td></td>
 </tr>
 <!-- Make sure Enter key allows to validate the selected line and disable the list of choice -->
 <tr>
@@ -154,6 +169,12 @@
   <td>//input[@name='field_my_foo_category_title']</td>
   <td>Quantity</td>
 </tr>
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/save" />
+<tr>
+  <td>assertValue</td>
+  <td>//input[@name='field_my_foo_category_title']</td>
+  <td>Quantity</td>
+</tr>
 </tbody></table>
 </body>
 </html>
\ No newline at end of file