fix(FilterBar): fix bubbling of selection-change event in dialog (#…

…5546) Fixes #5535
SAP · Feb 28, 2024 · 0e34aad · 0e34aad
1 parent 4a2eb85
commit 0e34aad
Showing 1 changed file with 31 additions and 31 deletions.
diff --git a/packages/main/src/components/FilterBar/FilterDialog.tsx b/packages/main/src/components/FilterBar/FilterDialog.tsx
@@ -296,40 +296,40 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
   };
 
   const handleCheckBoxChange = (e) => {
-    e.preventDefault();
+    if (e.target.hasAttribute('ui5-table')) {
+      // preventDefault should only be called if the target is the table, otherwise bubbled `selection-change` events
+      // also prevent their default behavior (e.g. the event of the MultiComboBox)
+      e.preventDefault();
+      const prevRowsByKey = e.detail.previouslySelectedRows.reduce(
+        (acc, prevSelRow) => ({ ...acc, [prevSelRow.dataset.reactKey]: prevSelRow }),
+        {}
+      );
+      const rowsByKey = e.detail.selectedRows.reduce(
+        (acc, selRow) => ({ ...acc, [selRow.dataset.reactKey]: selRow }),
+        {}
+      );
+
+      const changedRowKey =
+        e.detail.previouslySelectedRows > e.detail.selectedRows
+          ? compareObjects(prevRowsByKey, rowsByKey)
+          : compareObjects(rowsByKey, prevRowsByKey);
+
+      const element = rowsByKey[changedRowKey] || prevRowsByKey[changedRowKey];
+
+      // todo: workaround until specific rows can be disabled
+      if (element.dataset?.required === 'true') {
+        setForceRequired(element);
+        return;
+      }
 
-    if (!e.target.hasAttribute('ui5-table')) {
-      return;
-    }
-    const prevRowsByKey = e.detail.previouslySelectedRows.reduce(
-      (acc, prevSelRow) => ({ ...acc, [prevSelRow.dataset.reactKey]: prevSelRow }),
-      {}
-    );
-    const rowsByKey = e.detail.selectedRows.reduce(
-      (acc, selRow) => ({ ...acc, [selRow.dataset.reactKey]: selRow }),
-      {}
-    );
-
-    const changedRowKey =
-      e.detail.previouslySelectedRows > e.detail.selectedRows
-        ? compareObjects(prevRowsByKey, rowsByKey)
-        : compareObjects(rowsByKey, prevRowsByKey);
-
-    const element = rowsByKey[changedRowKey] || prevRowsByKey[changedRowKey];
-
-    // todo: workaround until specific rows can be disabled
-    if (element.dataset?.required === 'true') {
-      setForceRequired(element);
-      return;
-    }
+      if (typeof handleSelectionChange === 'function') {
+        handleSelectionChange(enrichEventWithDetails(e, { element, checked: element.selected }));
+      }
 
-    if (typeof handleSelectionChange === 'function') {
-      handleSelectionChange(enrichEventWithDetails(e, { element, checked: element.selected }));
+      setToggledFilters((prev) => {
+        return { ...prev, [changedRowKey]: element.selected };
+      });
     }
-
-    setToggledFilters((prev) => {
-      return { ...prev, [changedRowKey]: element.selected };
-    });
   };
 
   useEffect(() => {