From 864516695886399df3e41d761c97b1b9294f856f Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Tue, 20 Sep 2022 00:34:17 +0200
Subject: [PATCH] fix(cat-combo-table): prevent filter from unmounting
 data-elements

---
 .../category-combo-table-body.js              | 29 ++++++++++++-------
 src/data-workspace/table-body.module.css      |  4 +++
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/data-workspace/category-combo-table-body/category-combo-table-body.js b/src/data-workspace/category-combo-table-body/category-combo-table-body.js
index 5901e69360..26e61ace56 100644
--- a/src/data-workspace/category-combo-table-body/category-combo-table-body.js
+++ b/src/data-workspace/category-combo-table-body/category-combo-table-body.js
@@ -1,4 +1,5 @@
 import { TableBody, TableRow, TableCell } from '@dhis2/ui'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useCallback } from 'react'
 import { useMetadata, selectors } from '../../shared/index.js'
@@ -43,16 +44,19 @@ export const CategoryComboTableBody = React.memo(
                 ? new Array(maxColumnsInSection - sortedCOCs.length).fill(0)
                 : []
 
-        const filteredDataElements = dataElements.filter((de) => {
+        const filteredDeIds = new Set()
+        // filter out elements that does not match filterText
+        dataElements.forEach((de) => {
             const name = de.displayFormName.toLowerCase()
-            return (
-                (!filterText || name.includes(filterText.toLowerCase())) &&
-                (!globalFilterText ||
-                    name.includes(globalFilterText.toLowerCase()))
-            )
+            if (
+                (filterText && !name.includes(filterText.toLowerCase())) ||
+                (globalFilterText &&
+                    !name.includes(globalFilterText.toLowerCase()))
+            ) {
+                filteredDeIds.add(de.id)
+            }
         })
-        const hiddenItemsCount =
-            dataElements.length - filteredDataElements.length
+        const hiddenItemsCount = filteredDeIds.size
 
         return (
             <TableBody>
@@ -63,9 +67,14 @@ export const CategoryComboTableBody = React.memo(
                     paddingCells={paddingCells}
                     checkTableActive={checkTableActive}
                 />
-                {filteredDataElements.map((de, i) => {
+                {dataElements.map((de, i) => {
                     return (
-                        <TableRow key={de.id}>
+                        <TableRow
+                            key={de.id}
+                            className={cx({
+                                [styles.hidden]: filteredDeIds.has(de.id),
+                            })}
+                        >
                             <DataElementCell dataElement={de} />
                             {sortedCOCs.map((coc) => (
                                 <DataEntryCell key={coc.id}>
diff --git a/src/data-workspace/table-body.module.css b/src/data-workspace/table-body.module.css
index 41273fdf9e..43dc5c0f6a 100644
--- a/src/data-workspace/table-body.module.css
+++ b/src/data-workspace/table-body.module.css
@@ -58,3 +58,7 @@
     composes: totalCell;
     font-weight: initial;
 }
+
+.hidden {
+    display: none;
+}