fix: add debounced data-element search

src/context-selection/org-unit-selector-bar-item/debounced-search-input.js

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { InputField } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
-import useDebounce from './use-debounce.js'
+import { useDebounce } from '../../shared/index.js'
 
 export default function DebouncedSearchInput({ onChange, initialValue }) {
     const [value, setValue] = useState(initialValue)

src/data-workspace/entry-form.js

@@ -24,8 +24,7 @@ export const EntryForm = ({ dataSet }) => {
         <>
             {formType !== FORM_TYPES.CUSTOM && (
                 <FilterField
-                    value={globalFilterText}
-                    setFilterText={setGlobalFilterText}
+                    onFilterChange={setGlobalFilterText}
                     formType={formType}
                 />
             )}

src/data-workspace/filter-field.js

@@ -2,12 +2,17 @@ import i18n from '@dhis2/d2-i18n'
 import { Button, InputField } from '@dhis2/ui'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useState } from 'react'
+import { useDebounceCallback } from '../shared/index.js'
 import { FORM_TYPES } from './constants.js'
 import styles from './entry-form.module.css'
 
-export default function FilterField({ value, setFilterText, formType }) {
+export default function FilterField({ onFilterChange, formType }) {
+    const [filterText, setFilterText] = useState('')
     const wrapperClasses = classNames(styles.filterWrapper, 'hide-for-print')
+
+    useDebounceCallback(filterText, onFilterChange)
+
     return (
         <div className={wrapperClasses}>
             <InputField
@@ -19,7 +24,7 @@ export default function FilterField({ value, setFilterText, formType }) {
                         ? i18n.t('Filter fields in all sections')
                         : i18n.t('Filter fields')
                 }
-                value={value}
+                value={filterText}
                 onChange={({ value }) => setFilterText(value)}
             />
             <Button
@@ -36,6 +41,5 @@ export default function FilterField({ value, setFilterText, formType }) {
 
 FilterField.propTypes = {
     formType: PropTypes.string,
-    setFilterText: PropTypes.func,
-    value: PropTypes.string,
+    onFilterChange: PropTypes.func,
 }

src/data-workspace/section-form/section-filter.js

@@ -0,0 +1,32 @@
+import i18n from '@dhis2/d2-i18n'
+import { colors, IconFilter16 } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { useDebounceCallback } from '../../shared/index.js'
+import styles from './section.module.css'
+
+export const SectionFilter = ({ id, onFilterChange }) => {
+    const [filterText, setFilterText] = useState('')
+
+    useDebounceCallback(filterText, onFilterChange)
+
+    return (
+        <label htmlFor={id} className={styles.filterWrapper}>
+            <IconFilter16 color={colors.grey600} />
+            <input
+                name={id}
+                id={id}
+                type="text"
+                placeholder={i18n.t('Type here to filter in this section')}
+                value={filterText}
+                onChange={({ target }) => setFilterText(target.value)}
+                className={styles.filterInput}
+            />
+        </label>
+    )
+}
+
+SectionFilter.propTypes = {
+    id: PropTypes.string,
+    onFilterChange: PropTypes.func,
+}

src/data-workspace/section-form/section.js

@@ -1,18 +1,11 @@
-import i18n from '@dhis2/d2-i18n'
-import {
-    colors,
-    IconFilter16,
-    Table,
-    TableCellHead,
-    TableHead,
-    TableRowHead,
-} from '@dhis2/ui'
+import { Table, TableCellHead, TableHead, TableRowHead } from '@dhis2/ui'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { useMetadata, selectors } from '../../metadata/index.js'
 import { CategoryComboTable } from '../category-combo-table/index.js'
 import { getFieldId } from '../get-field-id.js'
+import { SectionFilter } from './section-filter.js'
 import styles from './section.module.css'
 
 export const SectionFormSection = ({
@@ -75,25 +68,10 @@ export const SectionFormSection = ({
                 </TableRowHead>
                 <TableRowHead>
                     <TableCellHead colSpan="100%" className={headerCellStyles}>
-                        <label
-                            htmlFor={filterInputId}
-                            className={styles.filterWrapper}
-                        >
-                            <IconFilter16 color={colors.grey600} />
-                            <input
-                                name={filterInputId}
-                                id={filterInputId}
-                                type="text"
-                                placeholder={i18n.t(
-                                    'Type here to filter in this section'
-                                )}
-                                value={filterText}
-                                onChange={({ target }) =>
-                                    setFilterText(target.value)
-                                }
-                                className={styles.filterInput}
-                            />
-                        </label>
+                        <SectionFilter
+                            id={filterInputId}
+                            onFilterChange={setFilterText}
+                        />
                     </TableCellHead>
                 </TableRowHead>
             </TableHead>

src/shared/index.js

@@ -5,3 +5,4 @@ export * from './fixed-periods/index.js'
 export * from './period/index.js'
 export * from './sidebar/index.js'
 export * from './utils.js'
+export * from './use-debounce.js'

src/context-selection/org-unit-selector-bar-item/use-debounce.js → src/shared/use-debounce.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 
 /** Copied from https://usehooks.com/useDebounce/ */
-export default function useDebounce(value, delay) {
+export function useDebounce(value, delay) {
     const [debouncedValue, setDebouncedValue] = useState(value)
 
     useEffect(() => {
@@ -11,3 +11,11 @@ export default function useDebounce(value, delay) {
 
     return debouncedValue
 }
+
+export function useDebounceCallback(value, cb, delay = 200) {
+    const debouncedValue = useDebounce(value, delay)
+
+    useEffect(() => {
+        cb(debouncedValue)
+    }, [debouncedValue, cb])
+}