MDL-74715 reportbuilder: switch event for adding filters/conditions.

Switch the select element event listener to that provided by custom
events helper, for adding report filters and conditions. This improves
cross-platform support.

reportbuilder/amd/src/local/editor/conditions.js

@@ -24,6 +24,7 @@
 "use strict";
 
 import $ from 'jquery';
+import CustomEvents from 'core/custom_interaction_events';
 import {dispatchEvent} from 'core/event_dispatcher';
 import 'core/inplace_editable';
 import Notification from 'core/notification';
@@ -52,10 +53,13 @@ const reloadSettingsConditionsRegion = (reportElement, templateContext) => {
     return Templates.renderForPromise('core_reportbuilder/local/settings/conditions', {conditions: templateContext})
         .then(({html, js}) => {
             Templates.replaceNode(settingsConditionsRegion, html, js + templateContext.javascript);
+
+            initConditionsForm();
+
             // Re-focus the add condition element after reloading the region.
             const reportAddCondition = reportElement.querySelector(reportSelectors.actions.reportAddCondition);
             reportAddCondition?.focus();
-            initConditionsForm(reportElement);
+
             return pendingPromise.resolve();
         });
 };
@@ -64,6 +68,8 @@ const reloadSettingsConditionsRegion = (reportElement, templateContext) => {
  * Initialise conditions form, must be called on each init because the form container is re-created when switching editor modes
  */
 const initConditionsForm = () => {
+    CustomEvents.define(reportSelectors.actions.reportAddCondition, [CustomEvents.events.accessibleChange]);
+
     // Handle dynamic conditions form.
     const reportElement = document.querySelector(reportSelectors.regions.report);
     const conditionFormContainer = reportElement.querySelector(reportSelectors.regions.settingsConditions);
@@ -138,20 +144,18 @@ export const init = initialized => {
         return;
     }
 
-    document.addEventListener('click', event => {
-
-        // Add condition to report.
+    // Add condition to report. Use custom events helper to ensure consistency across platforms.
+    $(document).on(CustomEvents.events.accessibleChange, reportSelectors.actions.reportAddCondition, event => {
         const reportAddCondition = event.target.closest(reportSelectors.actions.reportAddCondition);
         if (reportAddCondition) {
             event.preventDefault();
 
-            const reportElement = reportAddCondition.closest(reportSelectors.regions.report);
-
             // Check if dropdown is closed with no condition selected.
-            if (reportAddCondition.value === '0') {
+            if (reportAddCondition.selectedIndex === 0) {
                 return;
             }
 
+            const reportElement = reportAddCondition.closest(reportSelectors.regions.report);
             const pendingPromise = new Pending('core_reportbuilder/conditions:add');
 
             addCondition(reportElement.dataset.reportId, reportAddCondition.value)
@@ -165,6 +169,9 @@ export const init = initialized => {
                 })
                 .catch(Notification.exception);
         }
+    });
+
+    document.addEventListener('click', event => {
 
         // Remove condition from report.
         const reportRemoveCondition = event.target.closest(reportSelectors.actions.reportRemoveCondition);

reportbuilder/amd/src/local/editor/filters.js

@@ -24,6 +24,7 @@
 "use strict";
 
 import $ from 'jquery';
+import CustomEvents from 'core/custom_interaction_events';
 import {dispatchEvent} from 'core/event_dispatcher';
 import 'core/inplace_editable';
 import Notification from 'core/notification';
@@ -51,13 +52,24 @@ const reloadSettingsFiltersRegion = (reportElement, templateContext) => {
     return Templates.renderForPromise('core_reportbuilder/local/settings/filters', {filters: templateContext})
         .then(({html, js}) => {
             Templates.replaceNode(settingsFiltersRegion, html, js);
+
+            initFiltersForm();
+
             // Re-focus the add filter element after reloading the region.
             const reportAddFilter = reportElement.querySelector(reportSelectors.actions.reportAddFilter);
             reportAddFilter?.focus();
+
             return pendingPromise.resolve();
         });
 };
 
+/**
+ * Initialise filters form, must be called on each init because the form container is re-created when switching editor modes
+ */
+const initFiltersForm = () => {
+    CustomEvents.define(reportSelectors.actions.reportAddFilter, [CustomEvents.events.accessibleChange]);
+};
+
 /**
  * Initialise module, prefetch all required strings
  *
@@ -76,24 +88,23 @@ export const init = initialized => {
         'delete',
     ]);
 
+    initFiltersForm();
     if (initialized) {
         return;
     }
 
-    document.addEventListener('click', event => {
-
-        // Add filter to report.
+    // Add filter to report. Use custom events helper to ensure consistency across platforms.
+    $(document).on(CustomEvents.events.accessibleChange, reportSelectors.actions.reportAddFilter, event => {
         const reportAddFilter = event.target.closest(reportSelectors.actions.reportAddFilter);
         if (reportAddFilter) {
             event.preventDefault();
 
-            const reportElement = reportAddFilter.closest(reportSelectors.regions.report);
-
             // Check if dropdown is closed with no filter selected.
-            if (reportAddFilter.value === '0') {
+            if (reportAddFilter.selectedIndex === 0) {
                 return;
             }
 
+            const reportElement = reportAddFilter.closest(reportSelectors.regions.report);
             const pendingPromise = new Pending('core_reportbuilder/filters:add');
 
             addFilter(reportElement.dataset.reportId, reportAddFilter.value)
@@ -104,6 +115,9 @@ export const init = initialized => {
                 .then(() => pendingPromise.resolve())
                 .catch(Notification.exception);
         }
+    });
+
+    document.addEventListener('click', event => {
 
         // Remove filter from report.
         const reportRemoveFilter = event.target.closest(reportSelectors.actions.reportRemoveFilter);