MDL-78885 comboboxsearch: Switch event listener from 'click' to 'change'

Move from listening to 'click' to listening to 'change'

grade/amd/src/comboboxsearch/grade.js

@@ -41,6 +41,19 @@ export default class GradeItemSearch extends search_combobox {
         const component = document.querySelector(this.componentSelector());
         this.courseID = component.querySelector(this.selectors.courseid).dataset.courseid;
 
+        const searchValueElement = this.component.querySelector(`#${this.searchInput.dataset.inputElement}`);
+        searchValueElement.addEventListener('change', () => {
+            this.toggleDropdown(); // Otherwise the dropdown stays open when user choose an option using keyboard.
+
+            const valueElement = this.component.querySelector(`#${this.combobox.dataset.inputElement}`);
+            if (valueElement.value !== searchValueElement.value) {
+                valueElement.value = searchValueElement.value;
+                valueElement.dispatchEvent(new Event('change', {bubbles: true}));
+            }
+
+            searchValueElement.value = '';
+        });
+
         this.renderDefault();
     }
 
@@ -139,7 +152,6 @@ export default class GradeItemSearch extends search_combobox {
                 return {
                     id: grade.id,
                     name: grade.name,
-                    link: this.selectOneLink(grade.id),
                 };
             })
         );
@@ -181,10 +193,15 @@ export default class GradeItemSearch extends search_combobox {
             // Display results.
             await this.filterrenderpipe();
         }
-        // Prevent normal key presses activating this.
-        if (e.target.closest('.dropdown-item') && e.button === 0) {
-            window.location = e.target.closest('.dropdown-item').href;
-        }
+    }
+
+    /**
+     * The handler for when a user changes the value of the component (selects an option from the dropdown).
+     *
+     * @param {Event} e The change event.
+     */
+    changeHandler(e) {
+        window.location = this.selectOneLink(e.target.value);
     }
 
     /**

grade/report/grader/tests/behat/tertiary_navigation_searching.feature

@@ -343,7 +343,7 @@ Feature: Within the grader report, test that we can search for users
     And the field "perpage" matches value "20"
     When I set the field "Search users" to "42"
     # One of the users' phone numbers also matches.
-    And I wait until "View all results (2)" "link" exists
+    And I wait until "View all results (2)" "option_role" exists
     Then I confirm "Student s42" in "user" search within the gradebook widget exists
 
   Scenario: As a teacher I save grades using search and pagination
@@ -364,7 +364,7 @@ Feature: Within the grader report, test that we can search for users
     And I wait until the page is ready
     # Search for a single user on second page and save grades.
     When I set the field "Search users" to "test32"
-    And I wait until "View all results (1)" "link" exists
+    And I wait until "View all results (1)" "option_role" exists
     And I click on "Student test32" "option_role"
     And I wait until the page is ready
     And I give the grade "80.00" to the user "Student test32" for the grade item "Test assignment one"
@@ -409,7 +409,7 @@ Feature: Within the grader report, test that we can search for users
       | Student test32        |
     # Search for multiple users on second page and save grades.
     And I set the field "Search users" to "test3"
-    And I wait until "View all results (11)" "link" exists
+    And I wait until "View all results (11)" "option_role" exists
     And I click on "View all results (11)" "option_role"
     And I wait until the page is ready
     And I give the grade "10.00" to the user "Student test32" for the grade item "Test assignment one"