fix: trigger validation when leaving multi text fields

dhis2 · Nov 1, 2023 · be3462e · be3462e
1 parent 5c5efcc
commit be3462e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 20 deletions.
diff --git a/...ture-core/components/FormFields/New/Fields/MultiSelectField/MultiSelectField.component.js b/...ture-core/components/FormFields/New/Fields/MultiSelectField/MultiSelectField.component.js
@@ -39,22 +39,27 @@ const MultiSelectFieldComponentPlain = (props: Props) => {
         onSelect(multiSelectSelected.join(MULTI_TEXT_SEPARATOR));
     };
 
+    const handleBlur = () => {
+        onBlur(selected ? selected.join(MULTI_TEXT_SEPARATOR) : null);
+    };
+
     return (
-        <MultiSelectFieldUI
-            dataTest="multi-select-field"
-            onChange={onHandleChange}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            onKeyDown={onFocus}
-            selected={selected}
-            filterable
-            filterPlaceholder={translations.filterPlaceholder}
-            noMatchText={translations.noMatchText}
-        >
-            {options.map(option => (
-                <MultiSelectOption key={option.id} label={option.label} value={option.value} />
-            ))}
-        </MultiSelectFieldUI>
+        <div onBlur={handleBlur}>
+            <MultiSelectFieldUI
+                dataTest="multi-select-field"
+                onChange={onHandleChange}
+                onFocus={onFocus}
+                onKeyDown={onFocus}
+                selected={selected}
+                filterable
+                filterPlaceholder={translations.filterPlaceholder}
+                noMatchText={translations.noMatchText}
+            >
+                {options.map(option => (
+                    <MultiSelectOption key={option.id} label={option.label} value={option.value} />
+                ))}
+            </MultiSelectFieldUI>
+        </div>
     );
 };
 

diff --git a/.../capture-core/components/FormFields/New/Fields/MultiSelectField/MultiSelectField.types.js b/.../capture-core/components/FormFields/New/Fields/MultiSelectField/MultiSelectField.types.js
@@ -11,7 +11,7 @@ type MultiSelectOptionConfig = {
 export type Props = {
     onSelect: (value?: string) => void,
     onFocus: () => void,
-    onBlur: () => void,
+    onBlur: (value: ?string) => void,
     options: Array<MultiSelectOptionConfig>,
     value?: string,
     translations: {

diff --git a/...odules/capture-core/components/FormFields/New/Fields/MultiSelectField/withFocusHandler.js b/...odules/capture-core/components/FormFields/New/Fields/MultiSelectField/withFocusHandler.js
@@ -7,18 +7,19 @@ type Props = {
     onSetFocus: () => void,
     onRemoveFocus: () => void,
     inFocus: boolean,
-    onBlur?: ?(event: SyntheticEvent<HTMLInputElement>) => void,
+    onBlur?: (value: ?string) => void,
     onFocus: () => void,
     classes: {
         inputWrapperFocused: string,
         inputWrapperUnfocused: string,
     }
 };
 
-export const withFocusHandler = () => (InnerCompnent: React.ComponentType<any>) =>
+export const withFocusHandler = () => (InnerComponent: React.ComponentType<any>) =>
     class FocusHandlerHOC extends React.Component<Props> {
-        handleRemoveFocus = () => {
+        handleRemoveFocus = (value: string) => {
             this.props.onRemoveFocus();
+            this.props.onBlur && this.props.onBlur(value);
         }
 
         handleFocus = () => {
@@ -40,7 +41,7 @@ export const withFocusHandler = () => (InnerCompnent: React.ComponentType<any>)
                     className={classNames(defaultClasses.inputWrapper, inputWrapper)}
                 >
                     {/* $FlowFixMe[cannot-spread-inexact] automated comment */}
-                    <InnerCompnent
+                    <InnerComponent
                         onFocus={this.handleFocus}
                         onBlur={this.handleRemoveFocus}
                         onSelect={this.handleSelect}