feat: replace singleselectfield with newsingleselectfield across multiple components

henrikmv · henrikmv · commit 2dd4f08c6b9d · 2025-12-15T17:46:21.000+01:00
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-10-23T11:41:11.943Z\n"
-"PO-Revision-Date: 2025-10-23T11:41:11.943Z\n"
+"POT-Creation-Date: 2025-12-15T16:34:38.508Z\n"
+"PO-Revision-Date: 2025-12-15T16:34:38.508Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1128,6 +1128,9 @@ msgstr "Create new event"
 msgid "Search for a {{trackedEntityName}} in {{programName}}"
 msgstr "Search for a {{trackedEntityName}} in {{programName}}"
 
+msgid "Select tracked entity type"
+msgstr "Select tracked entity type"
+
 msgid "No tracked entity types available"
 msgstr "No tracked entity types available"
 
@@ -2138,7 +2141,7 @@ msgid ""
 "The following attribute type is not supported for searching and has been "
 "hidden"
 msgid_plural ""
-"The following attribute types is not supported for searching and has been "
+"The following attribute type is not supported for searching and has been "
 "hidden"
 msgstr[0] ""
 "The following attribute type is not supported for searching and has been "
diff --git a/src/core_modules/capture-core/components/D2Form/field/Components/OptionSetField/OptionSetSelectFieldForCustomForm.component.ts b/src/core_modules/capture-core/components/D2Form/field/Components/OptionSetField/OptionSetSelectFieldForCustomForm.component.ts
@@ -1,5 +1,5 @@
 import {
-    SingleSelectField,
+    NewSingleSelectField,
     withSelectSingleTranslations,
     withGotoInterface,
     withHideCompatibility,
@@ -31,7 +31,7 @@ export const OptionSetSelectFieldForCustomForm = withGotoInterface()(
                                     withCustomElementContainer(getContainerClass)(
                                         withOptionsIconElement()(
                                             withRulesOptionVisibilityHandler()(
-                                                SingleSelectField,
+                                                NewSingleSelectField,
                                             ),
                                         ),
                                     ),
diff --git a/src/core_modules/capture-core/components/D2Form/field/Components/OptionSetField/OptionSetSelectFieldForForm.component.ts b/src/core_modules/capture-core/components/D2Form/field/Components/OptionSetField/OptionSetSelectFieldForForm.component.ts
@@ -1,5 +1,5 @@
 import {
-    SingleSelectField,
+    NewSingleSelectField,
     withSelectSingleTranslations,
     withGotoInterface,
     withHideCompatibility,
@@ -41,7 +41,7 @@ export const OptionSetSelectFieldForForm = withGotoInterface()(
                                         withOptionsIconElement()(
                                             withRulesOptionVisibilityHandler()(
                                                 withFilterProps(getFilteredProps)(
-                                                    withSelectSingleTranslations()(SingleSelectField),
+                                                    withSelectSingleTranslations()(NewSingleSelectField),
                                                 ),
                                             ),
                                         ),
diff --git a/src/core_modules/capture-core/components/DataEntries/Enrollment/EnrollmentDataEntry.component.tsx b/src/core_modules/capture-core/components/DataEntries/Enrollment/EnrollmentDataEntry.component.tsx
@@ -24,7 +24,7 @@ import {
     withDefaultFieldContainer,
     withDefaultShouldUpdateInterface,
     orientations,
-    SingleSelectField,
+    NewSingleSelectField,
 } from '../../FormFields/New';
 import labelTypeClasses from './fieldLabels.module.css';
 import {
@@ -289,7 +289,7 @@ const getCategoryOptionsSettingsFn = () => {
                         })(
                             withDisplayMessages()(
                                 withInternalChangeHandler()(
-                                    withFilterProps(defaultFilterProps)(SingleSelectField),
+                                    withFilterProps(defaultFilterProps)(NewSingleSelectField),
                                 ),
                             ),
                         ),
diff --git a/src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/DataEntry.component.tsx b/src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/DataEntry.component.tsx
@@ -33,7 +33,7 @@ import {
     withDefaultFieldContainer,
     withDefaultShouldUpdateInterface,
     orientations,
-    SingleSelectField,
+    NewSingleSelectField,
     SingleOrgUnitSelectField,
 } from '../../../../FormFields/New';
 import { Assignee } from './Assignee';
@@ -362,7 +362,7 @@ const buildCategoryOptionsFieldSettingsFn = () => {
                         })(
                             withDisplayMessages()(
                                 withInternalChangeHandler()(
-                                    withFilterProps(defaultFilterProps)(SingleSelectField),
+                                    withFilterProps(defaultFilterProps)(NewSingleSelectField),
                                 ),
                             ),
                         ),
diff --git a/src/core_modules/capture-core/components/FormFields/New/Fields/SingleSelectField/SingleSelectField.component.tsx b/src/core_modules/capture-core/components/FormFields/New/Fields/SingleSelectField/SingleSelectField.component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { SimpleSingleSelect } from '@dhis2-ui/select';
 import { withFocusHandler } from './withFocusHandler';
 import { withSelectSingleTranslations } from './withTranslations';
@@ -23,7 +23,7 @@ type Props = {
     dataTest?: string;
 };
 
-const SingleSelectFieldComponentPlain = ({
+const NewSingleSelectFieldComponentPlain = ({
     id,
     value,
     onChange,
@@ -37,6 +37,7 @@ const SingleSelectFieldComponentPlain = ({
     clearable = true,
     dataTest,
 }: Props) => {
+    const selectRef = useRef<HTMLDivElement | null>(null);
     const fieldName = id ?? 'single-select-field';
 
     const selectedOption = value != null
@@ -65,24 +66,46 @@ const SingleSelectFieldComponentPlain = ({
         onBlur?.(null);
     };
 
+    useEffect(() => {
+        const element = selectRef.current;
+        if (!element) {
+            return undefined;
+        }
+
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Backspace' && value != null) {
+                onChange?.(null);
+                onBlur?.(null);
+            }
+        };
+
+        element.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            element.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [onBlur, onChange, value]);
+
     return (
-        <SimpleSingleSelect
-            name={fieldName}
-            options={options}
-            // @ts-expect-error - selected is not typed correctly
-            selected={selectedOption}
-            placeholder={placeholder}
-            clearable={clearable}
-            filterable={filterable}
-            aria-required={required}
-            onChange={handleChange}
-            onBlur={handleBlur}
-            onFocus={handleFocus}
-            onClear={handleClear}
-            dataTest={dataTest}
-            disabled={disabled}
-        />
+        <div ref={selectRef}>
+            <SimpleSingleSelect
+                name={fieldName}
+                options={options}
+                // @ts-expect-error - selected is not typed correctly
+                selected={selectedOption}
+                placeholder={placeholder}
+                clearable={clearable}
+                filterable={filterable}
+                aria-required={required}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                onFocus={handleFocus}
+                onClear={handleClear}
+                dataTest={dataTest}
+                disabled={disabled}
+            />
+        </div>
     );
 };
 
-export const SingleSelectField = withFocusHandler()(withSelectSingleTranslations()(SingleSelectFieldComponentPlain));
+export const NewSingleSelectField = withFocusHandler()(withSelectSingleTranslations()(NewSingleSelectFieldComponentPlain));
diff --git a/src/core_modules/capture-core/components/FormFields/New/index.ts b/src/core_modules/capture-core/components/FormFields/New/index.ts
@@ -3,7 +3,7 @@ export { TextField } from './Fields/TextField/TextField.component';
 export { BooleanField } from './Fields/BooleanField/BooleanField.component';
 export { AgeField } from './Fields/AgeField/AgeField.component';
 export { TrueOnlyField } from './Fields/TrueOnlyField/TrueOnlyField.component';
-export { SingleSelectField } from './Fields/SingleSelectField/SingleSelectField.component';
+export { NewSingleSelectField } from './Fields/SingleSelectField/SingleSelectField.component';
 export { MultiSelectField } from './Fields/MultiSelectField/MultiSelectField.component';
 export { withSelectSingleTranslations } from './Fields/SingleSelectField/withTranslations';
 export { withSelectMultiTranslations } from './Fields/MultiSelectField/withTranslations';
diff --git a/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegistrationSection/ProgramSelector/ComposedProgramSelector.component.tsx b/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegistrationSection/ProgramSelector/ComposedProgramSelector.component.tsx
@@ -6,7 +6,7 @@ import { ProgramFilterer } from '../../../../../ProgramFilterer';
 import type { Program } from '../../../../../../metaData';
 import { TrackerProgram } from '../../../../../../metaData';
 import {
-    SingleSelectField,
+    NewSingleSelectField,
     withSelectSingleTranslations,
     withFocusSaver,
     withDefaultFieldContainer,
@@ -118,7 +118,7 @@ class ProgramSelector extends React.Component<Props> {
                 {
                     (programs: Program[], isFiltered: boolean) => (
                         <div>
-                            <SingleSelectField
+                            <NewSingleSelectField
                                 options={this.getOptionsFromPrograms(programs)}
                                 required={false}
                                 onBlur={onUpdateSelectedProgram}
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/ComposedProgramSelector.component.tsx b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/ComposedProgramSelector.component.tsx
@@ -5,7 +5,7 @@ import { LinkButton } from '../../../../../../Buttons/LinkButton.component';
 import { ProgramFilterer } from '../../../../../../ProgramFilterer';
 import { TrackerProgram } from '../../../../../../../metaData';
 import {
-    SingleSelectField,
+    NewSingleSelectField,
     withSelectSingleTranslations,
     withFocusSaver,
     withDefaultFieldContainer,
@@ -108,7 +108,7 @@ class ProgramSelector extends React.Component<Props> {
                 {
                     (programs: Program[], isFiltered: boolean) => (
                         <div>
-                            <SingleSelectField
+                            <NewSingleSelectField
                                 options={this.getOptionsFromPrograms(programs)}
                                 required={false}
                                 onBlur={onUpdateSelectedProgram}
diff --git a/src/core_modules/capture-core/components/TeiSearch/SearchProgramSelector/SearchProgramSelector.component.tsx b/src/core_modules/capture-core/components/TeiSearch/SearchProgramSelector/SearchProgramSelector.component.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
 import i18n from '@dhis2/d2-i18n';
-import { SingleSelectField, SingleSelectOption } from '@dhis2/ui';
-import { withDefaultFieldContainer, withLabel } from '../../FormFields/New';
+import { NewSingleSelectField, withDefaultFieldContainer, withLabel } from '../../FormFields/New';
 import type { SearchProgramSelectorProps } from './SearchProgramSelector.types';
 
-const SearchProgramField = withDefaultFieldContainer()(withLabel()(SingleSelectField));
+const SearchProgramField = withDefaultFieldContainer()(withLabel()(NewSingleSelectField));
 
 const programFieldStyles = {
     labelContainerStyle: {
@@ -25,20 +24,13 @@ export class SearchProgramSelectorComponent extends React.Component<SearchProgra
         return (
             <SearchProgramField
                 styles={programFieldStyles}
-                selected={selectedProgramId}
-                onChange={this.onSelectProgram}
+                value={selectedProgramId}
+                onChange={value => this.onSelectProgram({ selected: value || '' })}
                 label={i18n.t('Selected program')}
                 clearable
                 filterable
-            >
-                {programOptions.map(option => (
-                    <SingleSelectOption
-                        key={option.value}
-                        label={option.label}
-                        value={option.value}
-                    />
-                ))}
-            </SearchProgramField>
+                options={programOptions}
+            />
         );
     }
 }
diff --git a/src/core_modules/capture-core/components/TrackedEntityTypeSelector/TrackedEntityTypeSelector.component.tsx b/src/core_modules/capture-core/components/TrackedEntityTypeSelector/TrackedEntityTypeSelector.component.tsx
@@ -2,11 +2,8 @@ import React, { useMemo, type ComponentType } from 'react';
 import i18n from '@dhis2/d2-i18n';
 import { withStyles, type WithStyles } from '@material-ui/core';
 
-import {
-    SingleSelectField,
-    SingleSelectOption,
-    spacers,
-} from '@dhis2/ui';
+import { spacers } from '@dhis2/ui';
+import { SimpleSingleSelect } from '@dhis2-ui/select';
 import type { Props } from './TrackedEntityTypeSelector.types';
 import { scopeTypes } from '../../metaData';
 import { useTrackedEntityTypesWithCorrelatedPrograms, useCurrentTrackedEntityTypeId } from '../../hooks';
@@ -39,48 +36,57 @@ export const TrackedEntityTypeSelectorPlain =
       const trackedEntityTypesWithCorrelatedPrograms = useTrackedEntityTypesWithCorrelatedPrograms();
       const selectedSearchScopeId = useCurrentTrackedEntityTypeId();
 
-      const handleSelectionChange = ({ selected }: { selected: string }) => {
-          onSelect(selected, scopeTypes.TRACKED_ENTITY_TYPE as keyof typeof scopeTypes);
-          onSetTrackedEntityTypeIdOnUrl({ trackedEntityTypeId: selected });
+      const options = useMemo(() =>
+          Object.values(trackedEntityTypesWithCorrelatedPrograms)
+              .filter(({ trackedEntityTypeAccess }: any) => {
+                  if (accessNeeded === 'write') {
+                      return trackedEntityTypeAccess?.data?.write;
+                  }
+                  if (accessNeeded === 'read') {
+                      return trackedEntityTypeAccess?.data?.read;
+                  }
+                  return false;
+              })
+              .map(({ trackedEntityTypeName, trackedEntityTypeId }: any) => ({
+                  value: trackedEntityTypeId,
+                  label: trackedEntityTypeName,
+              })),
+      [accessNeeded, trackedEntityTypesWithCorrelatedPrograms],
+      );
+
+      const selectedOption = selectedSearchScopeId
+          ? options.find(opt => opt.value === selectedSearchScopeId) ?? null
+          : null;
+
+      const handleSelectionChange = (nextValue: string | { label: string; value: string }) => {
+          // Handle both string and object (implementation sends object, types say string)
+          const value = typeof nextValue === 'string' ? nextValue : nextValue?.value || '';
+          onSelect(value, scopeTypes.TRACKED_ENTITY_TYPE as keyof typeof scopeTypes);
+          onSetTrackedEntityTypeIdOnUrl({ trackedEntityTypeId: value });
       };
 
       return (<>
 
           <div className={classes.searchRow}>
               <div className={classes.searchRowSelectElement}>
-                  <SingleSelectField
-                      label={headerText}
+                  {headerText && (
+                      <div style={{ display: 'block', marginBottom: '8px' }}>
+                          {headerText}
+                      </div>
+                  )}
+                  <SimpleSingleSelect
+                      name="tracked-entity-type-selector"
+                      options={options}
+                      // @ts-expect-error - selected is not typed correctly
+                      selected={selectedOption}
+                      placeholder={i18n.t('Select tracked entity type')}
                       onChange={handleSelectionChange}
-                      selected={selectedSearchScopeId}
                       empty={
                           <div className={classes.customEmpty}>
                               {i18n.t('No tracked entity types available')}
                           </div>
                       }
-                  >
-                      {
-                          useMemo(() => Object.values(trackedEntityTypesWithCorrelatedPrograms)
-                              .filter(({ trackedEntityTypeAccess }: any) => {
-                                  if (accessNeeded === 'write') {
-                                      return trackedEntityTypeAccess?.data?.write;
-                                  }
-                                  if (accessNeeded === 'read') {
-                                      return trackedEntityTypeAccess?.data?.read;
-                                  }
-                                  return false;
-                              })
-                              .map(({ trackedEntityTypeName, trackedEntityTypeId }: any) =>
-                                  (<SingleSelectOption
-                                      key={trackedEntityTypeId}
-                                      value={trackedEntityTypeId}
-                                      label={trackedEntityTypeName}
-                                  />),
-                              ), [
-                              accessNeeded,
-                              trackedEntityTypesWithCorrelatedPrograms,
-                          ])
-                      }
-                  </SingleSelectField>
+                  />
               </div>
           </div>
           {
diff --git a/src/core_modules/capture-core/components/WidgetEnrollmentEventNew/DataEntry/DataEntry.component.tsx b/src/core_modules/capture-core/components/WidgetEnrollmentEventNew/DataEntry/DataEntry.component.tsx
@@ -30,7 +30,7 @@ import {
     withDefaultFieldContainer,
     withDefaultShouldUpdateInterface,
     orientations,
-    SingleSelectField,
+    NewSingleSelectField,
     SingleOrgUnitSelectField,
 } from '../../FormFields/New';
 import { Assignee } from './Assignee';
@@ -372,7 +372,7 @@ const getCategoryOptionsSettingsFn = () => {
                         })(
                             withDisplayMessages()(
                                 withInternalChangeHandler()(
-                                    withFilterProps(defaultFilterProps)(SingleSelectField),
+                                    withFilterProps(defaultFilterProps)(NewSingleSelectField),
                                 ),
                             ),
                         ),
diff --git a/src/core_modules/capture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.component.tsx b/src/core_modules/capture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.component.tsx
diff --git a/src/core_modules/capture-core/components/WidgetRelatedStages/LinkToExisting/LinkToExisting.component.tsx b/src/core_modules/capture-core/components/WidgetRelatedStages/LinkToExisting/LinkToExisting.component.tsx
