dhis2 · flaminic · Apr 14, 2026 · Apr 14, 2026
diff --git a/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx b/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx
@@ -153,7 +153,10 @@ export const SearchableSingleSelect = ({
         >
             {searchable && (
                 <div className={classes.searchField}>
-                    <div className={classes.searchInput}>
+                    <div
+                        className={classes.searchInput}
+                        id="single-select-search-input"
+                    >
                         <Input
                             dense
                             initialFocus

diff --git a/src/components/drawer/Drawer.tsx b/src/components/drawer/Drawer.tsx
@@ -82,7 +82,10 @@ const DrawerContents = ({
                 delayInitialFocus: true,
                 allowOutsideClick: true,
                 clickOutsideDeactivates: () => {
-                    return !!document.getElementById('expression-builder-modal')
+                    return (
+                        !!document.getElementById('expression-builder-modal') ||
+                        !!document.getElementById('single-select-search-input')
+                    )
                 },
             }}
         >

diff --git a/src/components/fields/date/DateFieldFF.tsx b/src/components/fields/date/DateFieldFF.tsx
@@ -80,7 +80,7 @@ export function DateFieldFF({
             format={'YYYY-MM-DD'}
             onBlur={(_, e) => input.onBlur(e)}
             clearable
-            label={required ? `${label} (required)` : label}
+            label={label}
             {...resolvedValidation}
             valid={resolvedValidation?.valid && input?.value !== ''}
             {...calendarInputProps}

diff --git a/src/components/form/fields/DateField.tsx b/src/components/form/fields/DateField.tsx
@@ -70,7 +70,7 @@ export function DateField({
                 format={'YYYY-MM-DD'}
                 onBlur={(_, e) => input.onBlur(e)}
                 clearable
-                label={required ? `${label} (required)` : label}
+                label={label}
                 {...validation}
                 valid={validation?.valid && input?.value !== ''}
                 {...calendarInputProps}

diff --git a/src/pages/dataSetNotificationTemplates/form/TemplateFields.tsx b/src/pages/dataSetNotificationTemplates/form/TemplateFields.tsx
@@ -66,9 +66,7 @@ export function MessageTemplateField({
             component={TextAreaFieldFF}
             dataTest="formfields-message-template"
             required
-            label={i18n.t('{{fieldLabel}} (required)', {
-                fieldLabel: i18n.t('Message'),
-            })}
+            label={i18n.t('Message')}
             inputWidth="400px"
             name="messageTemplate"
             helpText={helpString}

diff --git a/src/pages/locales/form/CountryField.tsx b/src/pages/locales/form/CountryField.tsx
@@ -66,7 +66,7 @@ export function CountryField() {
         <Field
             name="country"
             dataTest="formfields-country"
-            label={i18n.t('Country (required)')}
+            label={i18n.t('Country')}
             required
             error={touched && !!error}
             validationText={(touched && error?.toString()) || ''}

diff --git a/src/pages/locales/form/LanguageField.tsx b/src/pages/locales/form/LanguageField.tsx
@@ -64,7 +64,7 @@ export function LanguageField() {
         <Field
             name="language"
             dataTest="formfields-language"
-            label={i18n.t('Language (required)')}
+            label={i18n.t('Language')}
             required
             error={touched && !!error}
             validationText={(touched && error?.toString()) || ''}

diff --git a/src/pages/predictors/form/PredictorFormFields.tsx b/src/pages/predictors/form/PredictorFormFields.tsx
@@ -85,14 +85,14 @@ export const PredictorFormFields = () => {
                 <StandardFormField>
                     <NumberField
                         fieldName="sequentialSampleCount"
-                        label={i18n.t('Sequential sample count (required)')}
+                        label={i18n.t('Sequential sample count')}
                         required={true}
                     />
                 </StandardFormField>
                 <StandardFormField>
                     <NumberField
                         fieldName="annualSampleCount"
-                        label={i18n.t('Annual sample count (required)')}
+                        label={i18n.t('Annual sample count')}
                         required={true}
                     />
                 </StandardFormField>

diff --git a/src/pages/programRuleVariables/fields/ProgramRuleVariableNameField.tsx b/src/pages/programRuleVariables/fields/ProgramRuleVariableNameField.tsx
@@ -158,9 +158,7 @@ export function ProgramRuleVariableNameField() {
                     dataTest="formfields-name"
                     required
                     inputWidth="400px"
-                    label={i18n.t('{{fieldLabel}} (required)', {
-                        fieldLabel: i18n.t('Name'),
-                    })}
+                    label={i18n.t('Name')}
                     helpText={i18n.t(
                         'Variable name cannot contain the words: and, or, not.'
                     )}

diff --git a/src/pages/programRuleVariables/fields/SourceTypeField.tsx b/src/pages/programRuleVariables/fields/SourceTypeField.tsx
@@ -64,7 +64,7 @@ export function SourceTypeField({
 
     return (
         <FieldGroup
-            label={i18n.t('Source type (required)')}
+            label={i18n.t('Source type')}
             required
             error={!!error}
             validationText={error ? meta.error : undefined}

diff --git a/src/pages/programRuleVariables/form/ProgramRuleVariableFormFields.tsx b/src/pages/programRuleVariables/form/ProgramRuleVariableFormFields.tsx
@@ -116,7 +116,7 @@ export const ProgramRuleVariableFormFields = () => {
                         inputWidth={FIELD_WIDTH}
                         dataTest="program-field"
                         name="program"
-                        label={i18n.t('Program (required)')}
+                        label={i18n.t('Program')}
                         query={{
                             resource: 'programs',
                             params: {

diff --git a/src/pages/programRules/fields/ActionTextInputField.tsx b/src/pages/programRules/fields/ActionTextInputField.tsx
@@ -1,4 +1,3 @@
-import i18n from '@dhis2/d2-i18n'
 import { Box, InputFieldFF } from '@dhis2/ui'
 import React from 'react'
 import { Field } from 'react-final-form'
@@ -19,14 +18,7 @@ export function ActionTextInputField({
                     <InputFieldFF
                         input={input}
                         meta={meta}
-                        label={
-                            required
-                                ? i18n.t('{{label}} (required)', {
-                                      label,
-                                      nsSeparator: '~:~',
-                                  })
-                                : label
-                        }
+                        label={label}
                         required={required}
                     />
                 </Box>

diff --git a/src/pages/programRules/fields/DataElementField.tsx b/src/pages/programRules/fields/DataElementField.tsx
@@ -1,8 +1,8 @@
-import i18n from '@dhis2/d2-i18n'
 import { Box, Field as UIField } from '@dhis2/ui'
 import { useQuery } from '@tanstack/react-query'
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import { Field, useFormState } from 'react-final-form'
+import { useDebouncedCallback } from 'use-debounce'
 import { BaseModelSingleSelect } from '../../../components/metadataFormControls/ModelSingleSelect/BaseModelSingleSelect'
 import { useBoundResourceQueryFn } from '../../../lib'
 
@@ -31,6 +31,7 @@ export function DataElementField({
     disableIfOtherFieldSet?: string
 }>) {
     const { values } = useFormState({ subscription: { values: true } })
+    const [filter, setFilter] = useState<string | undefined>(undefined)
     const queryFn = useBoundResourceQueryFn()
 
     const query = useMemo(
@@ -57,13 +58,24 @@ export function DataElementField({
                         (psde) => psde.dataElement
                     ) ?? []
             ) ?? []
-        return [...new Map(list.map((de) => [de.id, de])).values()]
-    }, [data])
+        const allOptions = [...new Map(list.map((de) => [de.id, de])).values()]
+        return filter
+            ? allOptions.filter((o) =>
+                  o.displayName?.toLowerCase().includes(filter.toLowerCase())
+              )
+            : allOptions
+    }, [data, filter])
 
     const disabled = disableIfOtherFieldSet
         ? !!values[disableIfOtherFieldSet]?.id
         : false
 
+    const handleFilterChange = useDebouncedCallback(({ value }) => {
+        if (value != undefined) {
+            setFilter(value)
+        }
+    }, 250)
+
     return (
         <Field
             name="dataElement"
@@ -72,14 +84,7 @@ export function DataElementField({
         >
             {({ input, meta }) => (
                 <UIField
-                    label={
-                        required
-                            ? i18n.t('{{label}} (required)', {
-                                  label,
-                                  nsSeparator: '~:~',
-                              })
-                            : label
-                    }
+                    label={label}
                     required={required}
                     disabled={disabled}
                     error={meta.invalid}
@@ -91,20 +96,17 @@ export function DataElementField({
                         <BaseModelSingleSelect
                             selected={input.value}
                             available={available}
+                            clearable
                             onChange={(value) => {
                                 input.onChange(value)
                                 input.onBlur()
                             }}
-                            showNoValueOption={{
-                                value: '',
-                                label: i18n.t('<No value>'),
-                            }}
                             disabled={disabled}
                             invalid={meta.touched && !!meta.error}
                             onRetryClick={queryResult.refetch}
                             showEndLoader={false}
                             loading={queryResult.isLoading}
-                            searchable={false}
+                            onFilterChange={handleFilterChange}
                         />
                     </Box>
                 </UIField>

diff --git a/src/pages/programRules/fields/DataElementWithOptionSetField.tsx b/src/pages/programRules/fields/DataElementWithOptionSetField.tsx
@@ -1,8 +1,8 @@
-import i18n from '@dhis2/d2-i18n'
 import { Box, Field as UIField } from '@dhis2/ui'
 import { useQuery } from '@tanstack/react-query'
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import { Field, useForm, useFormState } from 'react-final-form'
+import { useDebouncedCallback } from 'use-debounce'
 import { BaseModelSingleSelect } from '../../../components/metadataFormControls/ModelSingleSelect/BaseModelSingleSelect'
 import { useBoundResourceQueryFn, useClearFormFields } from '../../../lib'
 
@@ -31,6 +31,7 @@ export function DataElementWithOptionSetField({
     label: string
 }>) {
     const form = useForm()
+    const [filter, setFilter] = useState<string | undefined>(undefined)
     const clearDependentFields = useClearFormFields(
         form,
         'trackedEntityAttribute',
@@ -65,11 +66,23 @@ export function DataElementWithOptionSetField({
                     ) ?? []
             ) ?? []
         const withOptionSet = list.filter((de) => de.optionSet?.id)
-        return [...new Map(withOptionSet.map((de) => [de.id, de])).values()]
-    }, [data])
+        const allOptions = [
+            ...new Map(withOptionSet.map((de) => [de.id, de])).values(),
+        ]
+        return filter
+            ? allOptions.filter((o) =>
+                  o.displayName?.toLowerCase().includes(filter.toLowerCase())
+              )
+            : allOptions
+    }, [data, filter])
 
     const formValues = values as { trackedEntityAttribute?: { id: string } }
     const disabled = !!formValues.trackedEntityAttribute?.id
+    const handleFilterChange = useDebouncedCallback(({ value }) => {
+        if (value != undefined) {
+            setFilter(value)
+        }
+    }, 250)
 
     return (
         <Field
@@ -99,16 +112,13 @@ export function DataElementWithOptionSetField({
                                 input.onChange(value)
                                 input.onBlur()
                             }}
-                            showNoValueOption={{
-                                value: '',
-                                label: i18n.t('<No value>'),
-                            }}
+                            clearable
                             disabled={disabled}
                             invalid={meta.touched && !!meta.error}
                             onRetryClick={queryResult.refetch}
                             showEndLoader={false}
                             loading={queryResult.isLoading}
-                            searchable={false}
+                            onFilterChange={handleFilterChange}
                         />
                     </Box>
                 </UIField>

diff --git a/src/pages/programRules/fields/ExpressionField.tsx b/src/pages/programRules/fields/ExpressionField.tsx
@@ -35,9 +35,7 @@ export function ExpressionField({
             <Box width="800px" minWidth="100px">
                 <PaddedContainer
                     title={
-                        required
-                            ? i18n.t('Expression (required) *')
-                            : i18n.t('Expression')
+                        required ? i18n.t('Expression *') : i18n.t('Expression')
                     }
                 >
                     <ExpressionBuilderEntry

diff --git a/src/pages/programRules/fields/LocationField.tsx b/src/pages/programRules/fields/LocationField.tsx
@@ -27,7 +27,7 @@ export function LocationField({ required }: Readonly<{ required?: boolean }>) {
 
                 return (
                     <UIField
-                        label={i18n.t('Display widget (required)')}
+                        label={i18n.t('Display widget')}
                         required={required}
                         error={meta.invalid}
                         validationText={

diff --git a/src/pages/programRules/fields/NotificationTemplateField.tsx b/src/pages/programRules/fields/NotificationTemplateField.tsx
@@ -34,11 +34,7 @@ export function NotificationTemplateField({
             content={i18n.t('Message template can not be edited after saving')}
         >
             <ModelSingleSelectField
-                label={
-                    required
-                        ? i18n.t('Message template (required)')
-                        : i18n.t('Message template')
-                }
+                label={i18n.t('Message template')}
                 required={required}
                 disabled={disabled}
                 query={{
@@ -64,6 +60,7 @@ export function NotificationTemplateField({
                 }}
                 input={input}
                 meta={meta}
+                searchable={false}
             />
         </TooltipWrapper>
     )