From 43f3e199e9fbdb231a1e766054a5884275108491 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Wed, 11 Dec 2024 17:35:00 +0100
Subject: [PATCH] fix: cleanup and rename modelsingleselectlegacy

---
 .../SearchableSingleSelect.tsx                |   9 +-
 .../CategoryComboSelect.tsx                   |  20 +-
 .../BaseModelSingleSelect.tsx                 |  15 +-
 .../ModelSingleSelect/ModelSingleSelect.tsx   | 274 ++++++------------
 .../ModelSingleSelectField.tsx                |   2 +-
 .../ModelSingleSelectLegacy.tsx               | 197 +++++++++++++
 .../ModelSingleSelectRefactor.tsx             | 101 -------
 .../ModelSingleSelect/index.ts                |   3 +
 .../OptionSetSelect/OptionSetSelect.tsx       |   4 +-
 src/lib/form/createJsonPatchOperations.ts     |   2 +-
 .../fields/CategoryComboField.tsx             |  53 +++-
 11 files changed, 362 insertions(+), 318 deletions(-)
 create mode 100644 src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectLegacy.tsx
 delete mode 100644 src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectRefactor.tsx

diff --git a/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx b/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx
index 02024f32..a1544583 100644
--- a/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx
+++ b/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx
@@ -145,16 +145,9 @@ export const SearchableSingleSelect = ({
                         value={filter}
                         onChange={({ value }) => setFilterValue(value ?? '')}
                         placeholder={i18n.t('Filter options')}
+                        type='search'
                     />
                 </div>
-
-                <button
-                    className={classes.clearButton}
-                    disabled={!filter}
-                    onClick={() => setFilterValue('')}
-                >
-                    clear
-                </button>
             </div>
 
             {withAllOptions.map(({ value, label }) => (
diff --git a/src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx b/src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx
index 93142207..c213c760 100644
--- a/src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx
+++ b/src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx
@@ -1,12 +1,13 @@
 import i18n from '@dhis2/d2-i18n'
-import React from 'react'
+import React, { useCallback } from 'react'
+import { DEFAULT_CATEGORY_COMBO } from '../../../lib'
 import { PlainResourceQuery } from '../../../types'
 import { CategoryCombo } from '../../../types/generated'
 import { DisplayableModel } from '../../../types/models'
 import {
     ModelSingleSelect,
     ModelSingleSelectProps,
-} from '../ModelSingleSelect/ModelSingleSelectRefactor'
+} from '../ModelSingleSelect/ModelSingleSelect'
 
 export const categoryCombosSelectQuery = {
     resource: 'categoryCombos',
@@ -33,7 +34,20 @@ export const CategoryComboSelect = <
     ...modelSingleSelectProps
 }: CategoryComboSelectProps<TCategoryCombo>) => {
     const resolvedQuery = query ?? categoryCombosSelectQuery
+    // add defaultCatcombo (None) to the list of categoryCombos
+    const transform = useCallback(
+        (value: TCategoryCombo[]) => [
+            DEFAULT_CATEGORY_COMBO as TCategoryCombo,
+            ...value,
+        ],
+        []
+    )
+
     return (
-        <ModelSingleSelect {...modelSingleSelectProps} query={resolvedQuery} />
+        <ModelSingleSelect<TCategoryCombo>
+            query={resolvedQuery}
+            transform={transform}
+            {...modelSingleSelectProps}
+        />
     )
 }
diff --git a/src/components/metadataFormControls/ModelSingleSelect/BaseModelSingleSelect.tsx b/src/components/metadataFormControls/ModelSingleSelect/BaseModelSingleSelect.tsx
index 86306025..b0a8207d 100644
--- a/src/components/metadataFormControls/ModelSingleSelect/BaseModelSingleSelect.tsx
+++ b/src/components/metadataFormControls/ModelSingleSelect/BaseModelSingleSelect.tsx
@@ -1,3 +1,4 @@
+import i18n from '@dhis2/d2-i18n'
 import React, { useCallback, useMemo } from 'react'
 import { DisplayableModel } from '../../../types/models'
 import {
@@ -5,16 +6,17 @@ import {
     SearchableSingleSelectPropTypes,
 } from '../../SearchableSingleSelect'
 
+
 const toDisplayOption = (model: DisplayableModel) => ({
     value: model.id,
-    label: model.displayName,
+    label: model.displayName || i18n.t('Loading...'),
 })
 
 type OwnProps<TModel> = {
     selected?: TModel
     available: TModel[]
     onChange: (selected: TModel | undefined) => void
-    showNoValueOption?: boolean
+    noValueOption?: { value: string; label: string } | boolean
 }
 
 export type BaseModelSingleSelectProps<TModel extends DisplayableModel = DisplayableModel> = Omit<
@@ -28,7 +30,7 @@ export const BaseModelSingleSelect = <TModel extends DisplayableModel>({
     available,
     selected,
     onChange,
-    showNoValueOption,
+    noValueOption,
     ...searchableSingleSelectProps
 }: BaseModelSingleSelectProps<TModel>) => {
     const { allModelsMap, allSingleSelectOptions } = useMemo(() => {
@@ -40,15 +42,16 @@ export const BaseModelSingleSelect = <TModel extends DisplayableModel>({
         const allSingleSelectOptions = Array.from(allModelsMap).map(
             ([, value]) => toDisplayOption(value)
         )
-        if (showNoValueOption) {
-            allSingleSelectOptions.unshift({ value: '', label: '' })
+        if (noValueOption) {
+            const option = noValueOption === true ? { value: '', label: i18n.t('<No value>') } : noValueOption
+            allSingleSelectOptions.unshift(option)
         }
 
         return {
             allModelsMap,
             allSingleSelectOptions,
         }
-    }, [available, selected, showNoValueOption])
+    }, [available, selected, noValueOption])
 
     const handleOnChange: SearchableSingleSelectPropTypes['onChange'] =
         useCallback(
diff --git a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.tsx b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.tsx
index 1288e696..9bed173d 100644
--- a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.tsx
+++ b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.tsx
@@ -1,197 +1,101 @@
-import i18n from '@dhis2/d2-i18n'
-import React, {
-    forwardRef,
-    useCallback,
-    useImperativeHandle,
-    useRef,
-    useState,
-} from 'react'
-import { SelectOption, QueryResponse } from '../../../types'
-import { Pager } from '../../../types/generated'
-import { SearchableSingleSelect } from '../../SearchableSingleSelect'
-
-function computeDisplayOptions({
-    selected,
-    selectedOption: _selectedOption,
-    required,
-    options,
-}: {
-    options: SelectOption[]
-    selected?: string
-    required?: boolean
-    selectedOption?: SelectOption
-}): SelectOption[] {
-    let selectedOption = _selectedOption
-    if (!_selectedOption && selected) {
-        const foundOption = options.find((option) => option.value === selected)
-
-        // This happens only when we haven't fetched the lable for an initially
-        // selected value. Don't show anything to prevent error that an option is
-        // missing
-        if (!foundOption) {
-            return []
-        }
-
-        selectedOption = foundOption
-    }
-
-    const optionsContainSelected = options?.find(
-        ({ value }) => value === selected
-    )
-
-    const withSelectedOption =
-        selectedOption && !optionsContainSelected
-            ? [...options, selectedOption]
-            : options
-
-    if (!required) {
-        // This default value has been copied from the old app
-        return [
-            { value: '', label: i18n.t('<No value>') },
-            ...withSelectedOption,
-        ]
-    }
-
-    return withSelectedOption
+import React, { useMemo, useState } from 'react'
+import { useInfiniteQuery } from 'react-query'
+import { useDebouncedCallback } from 'use-debounce'
+import { useBoundResourceQueryFn } from '../../../lib/query/useBoundQueryFn'
+import { PlainResourceQuery } from '../../../types'
+import { PagedResponse } from '../../../types/generated'
+import { DisplayableModel } from '../../../types/models'
+import {
+    BaseModelSingleSelect,
+    BaseModelSingleSelectProps,
+} from './BaseModelSingleSelect'
+
+type Response<Model> = PagedResponse<Model, string>
+
+const defaultQuery = {
+    params: {
+        order: 'displayName:asc',
+        fields: ['id', 'displayName'],
+        pageSize: 10,
+    },
+} satisfies Omit<PlainResourceQuery, 'resource'>
+
+export type ModelSingleSelectProps<TModel extends DisplayableModel = DisplayableModel> = Omit<
+    BaseModelSingleSelectProps<TModel>,
+    | 'available'
+    | 'onFilterChange'
+    | 'onRetryClick'
+    | 'onEndReached'
+    | 'showEndLoader'
+    | 'loading'
+    | 'error'
+> & {
+    query: Omit<PlainResourceQuery, 'id'>
+    onFilterChange?: (value: string) => void
+    transform?: (value: TModel[]) => TModel[]
 }
 
-type UseInitialOptionQuery = ({
+export const ModelSingleSelect = <TModel extends DisplayableModel>({
     selected,
-    onComplete,
-}: {
-    onComplete: (option: SelectOption) => void
-    selected?: string
-}) => QueryResponse
-
-export interface ModelSingleSelectProps {
-    onChange: ({ selected }: { selected: string }) => void
-    required?: boolean
-    disabled?: boolean
-    invalid?: boolean
-    placeholder?: string
-    selected?: string
-    showAllOption?: boolean
-    onBlur?: () => void
-    onFocus?: () => void
-    useInitialOptionQuery: UseInitialOptionQuery
-    useOptionsQuery: () => QueryResponse
-}
-
-export const ModelSingleSelectLegacy = forwardRef(function ModelSingleSelect(
-    {
-        onChange,
-        invalid,
-        disabled,
-        placeholder = '',
-        required,
-        selected,
-        showAllOption,
-        onBlur,
-        onFocus,
-        useInitialOptionQuery,
-        useOptionsQuery,
-    }: ModelSingleSelectProps,
-    ref
-) {
-    // Using a ref because we don't want to react to changes.
-    // We're using this value only when imperatively calling `refetch`,
-    // nothing that depends on the render-cycle depends on this value
-    const filterRef = useRef('')
-    const pageRef = useRef(0)
-
-    // We need to persist the selected option so we can display an <Option />
-    // when the current list doesn't contain the selected option (e.g. when
-    // the page with the selected option hasn't been reached yet or when
-    // filtering)
-    const [selectedOption, setSelectedOption] = useState<SelectOption>()
-
-    const optionsQuery = useOptionsQuery()
-    const initialOptionQuery = useInitialOptionQuery({
-        selected,
-        onComplete: setSelectedOption,
-    })
-
-    const { refetch, data } = optionsQuery
-    const pager = (data as { pager: Pager })?.pager
-    const page = pager?.page || 0
-    const pageCount = pager?.pageCount || 0
-
-    useImperativeHandle(
-        ref,
-        () => ({
-            refetch: () => {
-                pageRef.current = 1
-                refetch({ page: pageRef.current, filter: filterRef.current })
-            },
-        }),
-        [refetch]
-    )
-
-    const adjustQueryParamsWithChangedFilter = useCallback(
-        ({ value }: { value: string }) => {
-            pageRef.current = 1
-            filterRef.current = value
-            refetch({ page: pageRef.current, filter: value })
+    query,
+    transform,
+    ...baseModelSingleSelectProps
+}: ModelSingleSelectProps<TModel>) => {
+    const queryFn = useBoundResourceQueryFn()
+    const [searchTerm, setSearchTerm] = useState('')
+
+    const searchFilter = `identifiable:token:${searchTerm}`
+    const filter: string[] = searchTerm ? [searchFilter] : []
+    const params = query.params
+
+    const queryObject = {
+        ...query,
+        params: {
+            ...defaultQuery.params,
+            ...params,
+            filter: filter.concat(params?.filter || []),
         },
-        [refetch]
-    )
+    }
+    const modelName = query.resource
+
+    const queryResult = useInfiniteQuery({
+        queryKey: [queryObject] as const,
+        queryFn: queryFn<Response<TModel>>,
+        keepPreviousData: true,
+        getNextPageParam: (lastPage) =>
+            lastPage.pager.nextPage ? lastPage.pager.page + 1 : undefined,
+        getPreviousPageParam: (firstPage) =>
+            firstPage.pager.prevPage ? firstPage.pager.page - 1 : undefined,
+    })
 
-    const incrementPage = useCallback(() => {
-        pageRef.current = page + 1
-        refetch({ page: pageRef.current, filter: filterRef.current })
-    }, [refetch, page])
+    const allDataMap = useMemo(() => {
+        const flatData =
+            queryResult.data?.pages.flatMap((page) => page[modelName]) ?? []
+        return flatData
+    }, [queryResult.data, modelName])
 
-    const loading =
-        optionsQuery.fetching ||
-        optionsQuery.loading ||
-        initialOptionQuery.loading
-    const error =
-        optionsQuery.error || initialOptionQuery.error
-            ? // @TODO: Ask Joe what do do here!
-              'An error has occurred. Please try again'
-            : ''
-    const result = (data as { result: SelectOption[] })?.result || []
+    const resolvedAvailable = useMemo(() => {
+        return transform ? transform(allDataMap) : allDataMap
+    }, [allDataMap, transform])
 
-    const displayOptions = computeDisplayOptions({
-        selected,
-        selectedOption,
-        required,
-        options: result,
-    })
+    const handleFilterChange = useDebouncedCallback(({ value }) => {
+        if (value != undefined) {
+            setSearchTerm(value)
+        }
+        baseModelSingleSelectProps.onFilterChange?.(value)
+    }, 250)
 
     return (
-        <SearchableSingleSelect
-            disabled={disabled}
-            invalid={invalid}
-            placeholder={placeholder}
-            showAllOption={showAllOption}
-            onChange={({ selected }) => {
-                if (selected === selectedOption?.value) {
-                    setSelectedOption(undefined)
-                } else {
-                    const option = result.find(
-                        ({ value }) => value === selected
-                    )
-                    setSelectedOption(option)
-                }
-
-                onChange({ selected })
-            }}
-            onEndReached={incrementPage}
-            options={displayOptions}
+        <BaseModelSingleSelect
+            {...baseModelSingleSelectProps}
             selected={selected}
-            showEndLoader={!loading && page < pageCount}
-            onFilterChange={adjustQueryParamsWithChangedFilter}
-            loading={loading}
-            error={error}
-            onRetryClick={() => {
-                refetch({
-                    page: pageRef.current,
-                    filter: filterRef.current,
-                })
-            }}
-            onBlur={onBlur}
-            onFocus={onFocus}
+            available={resolvedAvailable}
+            onFilterChange={handleFilterChange}
+            onRetryClick={queryResult.refetch}
+            showEndLoader={!!queryResult.hasNextPage}
+            onEndReached={queryResult.fetchNextPage}
+            loading={queryResult.isLoading}
+            error={queryResult.error as string | undefined}
         />
     )
-})
+}
diff --git a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectField.tsx b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectField.tsx
index 722bccea..b2cc07e8 100644
--- a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectField.tsx
+++ b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectField.tsx
@@ -5,7 +5,7 @@ import { DisplayableModel } from '../../../types/models'
 import {
     ModelSingleSelectProps,
     ModelSingleSelect,
-} from './ModelSingleSelectRefactor'
+} from './ModelSingleSelect'
 
 type OwnProps<TModel extends DisplayableModel> = {
     name: string
diff --git a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectLegacy.tsx b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectLegacy.tsx
new file mode 100644
index 00000000..bd16ebdf
--- /dev/null
+++ b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectLegacy.tsx
@@ -0,0 +1,197 @@
+import i18n from '@dhis2/d2-i18n'
+import React, {
+    forwardRef,
+    useCallback,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react'
+import { SelectOption, QueryResponse } from '../../../types'
+import { Pager } from '../../../types/generated'
+import { SearchableSingleSelect } from '../../SearchableSingleSelect'
+
+function computeDisplayOptions({
+    selected,
+    selectedOption: _selectedOption,
+    required,
+    options,
+}: {
+    options: SelectOption[]
+    selected?: string
+    required?: boolean
+    selectedOption?: SelectOption
+}): SelectOption[] {
+    let selectedOption = _selectedOption
+    if (!_selectedOption && selected) {
+        const foundOption = options.find((option) => option.value === selected)
+
+        // This happens only when we haven't fetched the lable for an initially
+        // selected value. Don't show anything to prevent error that an option is
+        // missing
+        if (!foundOption) {
+            return []
+        }
+
+        selectedOption = foundOption
+    }
+
+    const optionsContainSelected = options?.find(
+        ({ value }) => value === selected
+    )
+
+    const withSelectedOption =
+        selectedOption && !optionsContainSelected
+            ? [...options, selectedOption]
+            : options
+
+    if (!required) {
+        // This default value has been copied from the old app
+        return [
+            { value: '', label: i18n.t('<No value>') },
+            ...withSelectedOption,
+        ]
+    }
+
+    return withSelectedOption
+}
+
+type UseInitialOptionQuery = ({
+    selected,
+    onComplete,
+}: {
+    onComplete: (option: SelectOption) => void
+    selected?: string
+}) => QueryResponse
+
+export interface ModelSingleSelectLegacyProps {
+    onChange: ({ selected }: { selected: string }) => void
+    required?: boolean
+    disabled?: boolean
+    invalid?: boolean
+    placeholder?: string
+    selected?: string
+    showAllOption?: boolean
+    onBlur?: () => void
+    onFocus?: () => void
+    useInitialOptionQuery: UseInitialOptionQuery
+    useOptionsQuery: () => QueryResponse
+}
+
+export const ModelSingleSelectLegacy = forwardRef(function ModelSingleSelect(
+    {
+        onChange,
+        invalid,
+        disabled,
+        placeholder = '',
+        required,
+        selected,
+        showAllOption,
+        onBlur,
+        onFocus,
+        useInitialOptionQuery,
+        useOptionsQuery,
+    }: ModelSingleSelectLegacyProps,
+    ref
+) {
+    // Using a ref because we don't want to react to changes.
+    // We're using this value only when imperatively calling `refetch`,
+    // nothing that depends on the render-cycle depends on this value
+    const filterRef = useRef('')
+    const pageRef = useRef(0)
+
+    // We need to persist the selected option so we can display an <Option />
+    // when the current list doesn't contain the selected option (e.g. when
+    // the page with the selected option hasn't been reached yet or when
+    // filtering)
+    const [selectedOption, setSelectedOption] = useState<SelectOption>()
+
+    const optionsQuery = useOptionsQuery()
+    const initialOptionQuery = useInitialOptionQuery({
+        selected,
+        onComplete: setSelectedOption,
+    })
+
+    const { refetch, data } = optionsQuery
+    const pager = (data as { pager: Pager })?.pager
+    const page = pager?.page || 0
+    const pageCount = pager?.pageCount || 0
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            refetch: () => {
+                pageRef.current = 1
+                refetch({ page: pageRef.current, filter: filterRef.current })
+            },
+        }),
+        [refetch]
+    )
+
+    const adjustQueryParamsWithChangedFilter = useCallback(
+        ({ value }: { value: string }) => {
+            pageRef.current = 1
+            filterRef.current = value
+            refetch({ page: pageRef.current, filter: value })
+        },
+        [refetch]
+    )
+
+    const incrementPage = useCallback(() => {
+        pageRef.current = page + 1
+        refetch({ page: pageRef.current, filter: filterRef.current })
+    }, [refetch, page])
+
+    const loading =
+        optionsQuery.fetching ||
+        optionsQuery.loading ||
+        initialOptionQuery.loading
+    const error =
+        optionsQuery.error || initialOptionQuery.error
+            ? // @TODO: Ask Joe what do do here!
+              'An error has occurred. Please try again'
+            : ''
+    const result = (data as { result: SelectOption[] })?.result || []
+
+    const displayOptions = computeDisplayOptions({
+        selected,
+        selectedOption,
+        required,
+        options: result,
+    })
+
+    return (
+        <SearchableSingleSelect
+            disabled={disabled}
+            invalid={invalid}
+            placeholder={placeholder}
+            showAllOption={showAllOption}
+            onChange={({ selected }) => {
+                if (selected === selectedOption?.value) {
+                    setSelectedOption(undefined)
+                } else {
+                    const option = result.find(
+                        ({ value }) => value === selected
+                    )
+                    setSelectedOption(option)
+                }
+
+                onChange({ selected })
+            }}
+            onEndReached={incrementPage}
+            options={displayOptions}
+            selected={selected}
+            showEndLoader={!loading && page < pageCount}
+            onFilterChange={adjustQueryParamsWithChangedFilter}
+            loading={loading}
+            error={error}
+            onRetryClick={() => {
+                refetch({
+                    page: pageRef.current,
+                    filter: filterRef.current,
+                })
+            }}
+            onBlur={onBlur}
+            onFocus={onFocus}
+        />
+    )
+})
diff --git a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectRefactor.tsx b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectRefactor.tsx
deleted file mode 100644
index 9b10648c..00000000
--- a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectRefactor.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { useMemo, useRef, useState } from 'react'
-import { useInfiniteQuery } from 'react-query'
-import { useDebouncedCallback } from 'use-debounce'
-import { useBoundResourceQueryFn } from '../../../lib/query/useBoundQueryFn'
-import { PlainResourceQuery } from '../../../types'
-import { PagedResponse } from '../../../types/generated'
-import { DisplayableModel } from '../../../types/models'
-import {
-    BaseModelSingleSelect,
-    BaseModelSingleSelectProps,
-} from './BaseModelSingleSelect'
-
-type Response<Model> = PagedResponse<Model, string>
-
-const defaultQuery = {
-    params: {
-        order: 'displayName:asc',
-        fields: ['id', 'displayName'],
-        pageSize: 10,
-    },
-} satisfies Omit<PlainResourceQuery, 'resource'>
-
-export type ModelSingleSelectProps<TModel extends DisplayableModel = DisplayableModel> = Omit<
-    BaseModelSingleSelectProps<TModel>,
-    | 'available'
-    | 'onFilterChange'
-    | 'onRetryClick'
-    | 'onEndReached'
-    | 'showEndLoader'
-    | 'loading'
-    | 'error'
-> & {
-    query: Omit<PlainResourceQuery, 'id'>
-    onFilterChange?: (value: string) => void
-    transform?: (value: TModel[]) => TModel[]
-}
-
-export const ModelSingleSelect = <TModel extends DisplayableModel>({
-    selected,
-    query,
-    transform,
-    ...baseModelSingleSelectProps
-}: ModelSingleSelectProps<TModel>) => {
-    const queryFn = useBoundResourceQueryFn()
-    const [searchTerm, setSearchTerm] = useState('')
-
-    const searchFilter = `identifiable:token:${searchTerm}`
-    const filter: string[] = searchTerm ? [searchFilter] : []
-    const params = query.params
-
-    const queryObject = {
-        ...query,
-        params: {
-            ...defaultQuery.params,
-            ...params,
-            filter: filter.concat(params?.filter || []),
-        },
-    }
-    const modelName = query.resource
-
-    const queryResult = useInfiniteQuery({
-        queryKey: [queryObject] as const,
-        queryFn: queryFn<Response<TModel>>,
-        keepPreviousData: true,
-        getNextPageParam: (lastPage) =>
-            lastPage.pager.nextPage ? lastPage.pager.page + 1 : undefined,
-        getPreviousPageParam: (firstPage) =>
-            firstPage.pager.prevPage ? firstPage.pager.page - 1 : undefined,
-    })
-
-    const allDataMap = useMemo(() => {
-        const flatData =
-            queryResult.data?.pages.flatMap((page) => page[modelName]) ?? []
-        return flatData
-    }, [queryResult.data, modelName])
-
-    const resolvedAvailable = useMemo(() => {
-        return transform ? transform(allDataMap) : allDataMap
-    }, [allDataMap, transform])
-
-    const handleFilterChange = useDebouncedCallback(({ value }) => {
-        if (value != undefined) {
-            setSearchTerm(value)
-        }
-        baseModelSingleSelectProps.onFilterChange?.(value)
-    }, 250)
-
-    return (
-        <BaseModelSingleSelect
-            {...baseModelSingleSelectProps}
-            selected={selected}
-            available={resolvedAvailable}
-            onFilterChange={handleFilterChange}
-            onRetryClick={queryResult.refetch}
-            showEndLoader={!!queryResult.hasNextPage}
-            onEndReached={queryResult.fetchNextPage}
-            loading={queryResult.isLoading}
-            error={queryResult.error as string | undefined}
-        />
-    )
-}
diff --git a/src/components/metadataFormControls/ModelSingleSelect/index.ts b/src/components/metadataFormControls/ModelSingleSelect/index.ts
index d5dbc231..9b6f01f2 100644
--- a/src/components/metadataFormControls/ModelSingleSelect/index.ts
+++ b/src/components/metadataFormControls/ModelSingleSelect/index.ts
@@ -1 +1,4 @@
+export * from './ModelSingleSelectLegacy'
+export * from './useRefreshSingleSelect'
+export * from './ModelSingleSelectField'
 export * from './ModelSingleSelect'
diff --git a/src/components/metadataFormControls/OptionSetSelect/OptionSetSelect.tsx b/src/components/metadataFormControls/OptionSetSelect/OptionSetSelect.tsx
index 061b98a0..c78f1b8b 100644
--- a/src/components/metadataFormControls/OptionSetSelect/OptionSetSelect.tsx
+++ b/src/components/metadataFormControls/OptionSetSelect/OptionSetSelect.tsx
@@ -2,11 +2,11 @@ import i18n from '@dhis2/d2-i18n'
 import React, { forwardRef } from 'react'
 import { useOptionSetsQuery } from '../../../lib'
 import { ModelSingleSelectLegacy } from '../ModelSingleSelect'
-import type { ModelSingleSelectProps } from '../ModelSingleSelect'
+import type { ModelSingleSelectLegacyProps } from '../ModelSingleSelect'
 import { useInitialOptionQuery } from './useInitialOptionQuery'
 
 type OptionSetSelectProps = Omit<
-    ModelSingleSelectProps,
+    ModelSingleSelectLegacyProps,
     'useInitialOptionQuery' | 'useOptionsQuery'
 >
 
diff --git a/src/lib/form/createJsonPatchOperations.ts b/src/lib/form/createJsonPatchOperations.ts
index 451f47cc..931e97a0 100644
--- a/src/lib/form/createJsonPatchOperations.ts
+++ b/src/lib/form/createJsonPatchOperations.ts
@@ -69,6 +69,6 @@ export function createJsonPatchOperations<
     return adjustedDirtyFieldsKeys.map((name) => ({
         op: get(name, originalValue) ? 'replace' : 'add',
         path: `/${name.replace(/[.]/g, '/')}`,
-        value: get(name, values) || '',
+        value: get(name, values) || null,
     }))
 }
diff --git a/src/pages/dataElements/fields/CategoryComboField.tsx b/src/pages/dataElements/fields/CategoryComboField.tsx
index 32f951d6..29332125 100644
--- a/src/pages/dataElements/fields/CategoryComboField.tsx
+++ b/src/pages/dataElements/fields/CategoryComboField.tsx
@@ -1,13 +1,17 @@
 import i18n from '@dhis2/d2-i18n'
+import { Field } from '@dhis2/ui'
 import React, { useEffect } from 'react'
 import { useField, useForm } from 'react-final-form'
 import { useHref } from 'react-router'
-import { EditableFieldWrapper } from '../../../components'
-import { ModelSingleSelectField, ModelSingleSelectFieldProps } from '../../../components/metadataFormControls/ModelSingleSelect/ModelSingleSelectField'
+import { CategoryComboSelect, EditableFieldWrapper } from '../../../components'
+import {
+    ModelSingleSelectFieldProps
+} from '../../../components/metadataFormControls/ModelSingleSelect/ModelSingleSelectField'
 import { useRefreshModelSingleSelect } from '../../../components/metadataFormControls/ModelSingleSelect/useRefreshSingleSelect'
 import { DEFAULT_CATEGORY_COMBO } from '../../../lib'
 import { PlainResourceQuery } from '../../../types'
 import classes from './CategoryComboField.module.css'
+import { DisplayableModel } from '../../../types/models'
 
 const query = {
     resource: 'categoryCombos',
@@ -18,7 +22,9 @@ const query = {
 } as const satisfies PlainResourceQuery
 
 // stable reference for transform function
-const withDefaultCategoryCombo: ModelSingleSelectFieldProps['transform'] = (value) => [DEFAULT_CATEGORY_COMBO, ...value]
+const withDefaultCategoryCombo: ModelSingleSelectFieldProps['transform'] = (
+    value
+) => [DEFAULT_CATEGORY_COMBO, ...value]
 /*
  * @TODO: Verify that the api ignores the category combo when it's disabled.
  *        If it does not, file a jira issue and "escalate" this so it will be
@@ -34,7 +40,7 @@ export function CategoryComboField() {
     const {
         input: { value: domainTypeValue },
     } = useField('domainType')
-
+    const { input, meta } = useField<DisplayableModel>('categoryCombo', { validateFields: [] })
     const domainTypeIsTracker = domainTypeValue === 'TRACKER'
     const disabled = domainTypeIsTracker
     const newCategoryComboLink = useHref('/categoryCombos/new')
@@ -52,14 +58,39 @@ export function CategoryComboField() {
             onAddNew={() => window.open(newCategoryComboLink, '_blank')}
         >
             <div className={classes.categoryComboSelect}>
-                <ModelSingleSelectField
-                    query={query}
-                    name="categoryCombo"
-                    label={i18n.t('Category combo')}
+                <Field
                     required
-                    transform={withDefaultCategoryCombo}
-                    disabled={disabled}
-                />
+                    name="categoryCombo"
+                    label={i18n.t('{{fieldLabel}} (required)', {
+                        fieldLabel: i18n.t('Category combination'),
+                    })}
+                    helpText={i18n.t(
+                        'Choose how this data element is disaggregated'
+                    )}
+                    error={meta.touched && !!meta.error}
+                    validationText={meta.touched ? meta.error : undefined}
+                    dataTest="formfields-categorycombo"
+                >
+                    <CategoryComboSelect
+                        selected={input.value}
+                        disabled={disabled}
+                        onChange={(selected) => {
+                            input.onChange(selected)
+                            input.onBlur()
+                        }}
+                        onBlur={input.onBlur}
+                        onFocus={input.onFocus}
+                        query={{
+                            resource: 'categoryCombos',
+                            params: {
+                                filter: [
+                                    'isDefault:eq:false',
+                                    'dataDimensionType:eq:DISAGGREGATION',
+                                ],
+                            },
+                        }}
+                    />
+                </Field>
             </div>
         </EditableFieldWrapper>
     )