feat: improve CategorySelector and LinkToExisting components

Author: henrikmv

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-12-19T18:08:41.230Z\n"
-"PO-Revision-Date: 2025-12-19T18:08:41.230Z\n"
+"POT-Creation-Date: 2025-12-19T20:04:49.883Z\n"
+"PO-Revision-Date: 2025-12-19T20:04:49.883Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1499,8 +1499,8 @@ msgstr "{{trackedEntityTypeName}} profile"
 msgid "Choose a {{linkableStageLabel}} event"
 msgstr "Choose a {{linkableStageLabel}} event"
 
-msgid "Choose a {{linkableStageLabel}}"
-msgstr "Choose a {{linkableStageLabel}}"
+msgid "Select an event"
+msgstr "Select an event"
 
 msgid "{{ linkableStageLabel }} can only have one event"
 msgstr "{{ linkableStageLabel }} can only have one event"

src/core_modules/capture-core/components/Pagination/rowsPerPage.css

@@ -10,8 +10,6 @@
     padding-left: 7px!important;
 }
 
-
-
 #rows-per-page-selector .Select-arrow-zone {
     font-size: initial;
     width: 15px;

src/core_modules/capture-core/components/WidgetEventSchedule/CategoryOptions/CategorySelector.component.tsx

@@ -14,14 +14,13 @@ type Props = {
     // eslint-disable-next-line react/no-unused-prop-types
     category: { id: string; displayName: string};
     selectedOrgUnitId: string | null;
-    onChange: (option: SelectOption) => void;
+    onChange: (option: SelectOption | null) => void;
     initialValue?: SelectOption | null;
 }
 
 type State = {
     options: Array<SelectOption> | null;
     prevOrgUnitId: string | null;
-    open: boolean;
     selectedOption?: SelectOption | null;
 };
 
@@ -61,6 +60,7 @@ export class CategorySelector extends React.Component<Props, State> {
             return {
                 prevOrgUnitId: props.selectedOrgUnitId,
                 options: null,
+                selectedOption: null,
             };
         }
         return null;
@@ -73,15 +73,14 @@ export class CategorySelector extends React.Component<Props, State> {
         this.state = {
             options: null,
             prevOrgUnitId: null,
-            open: false,
             selectedOption: props.initialValue,
         };
-        this.loadCagoryOptions(this.props);
+        this.loadCategoryOptions(this.props);
     }
 
     componentDidUpdate(prevProps: Props) {
         if (!this.state.options && prevProps.selectedOrgUnitId !== this.props.selectedOrgUnitId) {
-            this.loadCagoryOptions(this.props);
+            this.loadCategoryOptions(this.props);
         }
     }
 
@@ -90,7 +89,7 @@ export class CategorySelector extends React.Component<Props, State> {
         this.cancelablePromise = null;
     }
 
-    loadCagoryOptions(props: Props) {
+    loadCategoryOptions(props: Props) {
         const { category, selectedOrgUnitId } = props;
 
         this.setState({
@@ -144,21 +143,31 @@ export class CategorySelector extends React.Component<Props, State> {
         this.cancelablePromise = currentRequestCancelablePromise;
     }
 
-    render() {
+    onSelectCategory = (value: string | null) => {
         const { onChange } = this.props;
         const { options } = this.state;
 
+        if (value === null) {
+            this.setState({ selectedOption: null });
+            onChange(null);
+            return;
+        }
+
+        const option = options?.find(opt => opt.value === value);
+        if (option) {
+            this.setState({ selectedOption: option });
+            onChange(option);
+        }
+    }
+
+    render() {
+        const { options, selectedOption } = this.state;
+
         return (
             options ? <NewSingleSelectField
-                value={this.state.selectedOption?.value ?? null}
+                value={selectedOption?.value ?? null}
                 clearable
-                onChange={(value: string | null) => {
-                    const selectedOption = value != null ? options.find(opt => opt.value === value) : null;
-                    this.setState({ selectedOption });
-                    // Match OptionsSelectVirtualized behavior: always call onChange, even when null
-                    // @ts-expect-error - onChange type doesn't accept null, but OptionsSelectVirtualized called it with null
-                    onChange(selectedOption);
-                }}
+                onChange={this.onSelectCategory}
                 options={options}
             /> : null
         );

src/core_modules/capture-core/components/WidgetRelatedStages/LinkToExisting/LinkToExisting.component.tsx

@@ -2,24 +2,16 @@ import React, { type ComponentType } from 'react';
 import i18n from '@dhis2/d2-i18n';
 import { spacers } from '@dhis2/ui';
 import { withStyles, type WithStyles } from 'capture-core-utils/styles';
-import { NewSingleSelectField } from '../../FormFields/New';
+// @ts-expect-error - SimpleSingleSelectField exists but types may not be available
+import { SimpleSingleSelectField } from '@dhis2-ui/select';
 import type { LinkToExistingProps } from './LinkToExisting.types';
 
-const styles: Readonly<any> = {
-    searchRow: {
+const styles: Readonly<any> = ({ typography }: any) => ({
+    selectField: {
+        maxWidth: typography.pxToRem(300),
         padding: spacers.dp16,
-        display: 'flex',
-        alignItems: 'center',
-        gap: spacers.dp16,
     },
-    label: {
-        width: '150px',
-        fontSize: '14px',
-    },
-    singleSelectField: {
-        flexGrow: 1,
-    },
-};
+});
 
 type Props = LinkToExistingProps & WithStyles<typeof styles>;
 
@@ -38,7 +30,14 @@ export const LinkToExistingPlain = ({
     const onChange = (value: string | null) => {
         setRelatedStagesDataValues({
             ...relatedStagesDataValues,
-            linkedEventId: value || '',
+            linkedEventId: value ?? '',
+        });
+    };
+
+    const handleClear = () => {
+        setRelatedStagesDataValues({
+            ...relatedStagesDataValues,
+            linkedEventId: '',
         });
     };
 
@@ -47,24 +46,25 @@ export const LinkToExistingPlain = ({
         label: event.label,
     }));
 
+    const label = i18n.t('Choose a {{linkableStageLabel}} event', {
+        linkableStageLabel,
+    });
+
+
     return (
-        <div className={classes.searchRow}>
-            <p className={classes.label}>
-                {i18n.t('Choose a {{linkableStageLabel}} event', {
-                    linkableStageLabel,
-                })}
-            </p>
-            <div className={classes.singleSelectField}>
-                <NewSingleSelectField
-                    value={relatedStagesDataValues.linkedEventId}
-                    onChange={onChange}
-                    placeholder={i18n.t('Choose a {{linkableStageLabel}}', {
-                        linkableStageLabel,
-                    })}
-                    dataTest="related-stages-existing-response-list"
-                    options={options}
-                />
-            </div>
+        <div className={classes.selectField}>
+
+            <SimpleSingleSelectField
+                name="related-stages-existing-response-list"
+                selected={relatedStagesDataValues.linkedEventId}
+                onChange={onChange}
+                onClear={handleClear}
+                placeholder={i18n.t('Select an event')}
+                label={label}
+                options={options}
+                clearable
+                dataTest="related-stages-existing-response-list"
+            />
         </div>
     );
 };