(fix) Fix rendering error in conditions form

packages/esm-patient-conditions-app/src/conditions/conditions-form.component.tsx

@@ -15,6 +15,7 @@ interface ConditionFormProps {
   formContext: 'creating' | 'editing';
   patientUuid?: string;
 }
+
 const conditionSchema = z.object({
   clinicalStatus: z.string(),
   endDate: z.date().optional(),
@@ -45,7 +46,7 @@ const ConditionsForm: React.FC<ConditionFormProps> = ({ closeWorkspace, conditio
             : null
           : null,
       clinicalStatus: condition?.cells?.find((cell) => cell?.info?.header === 'clinicalStatus')?.value ?? 'Active',
-      search: condition?.cells?.find((cell) => cell?.info?.header === 'display')?.value,
+      search: '',
     },
   });
 
@@ -65,7 +66,7 @@ const ConditionsForm: React.FC<ConditionFormProps> = ({ closeWorkspace, conditio
           patientUuid={patientUuid}
           closeWorkspace={closeWorkspace}
           conditionToEdit={condition}
-          editing={formContext === 'editing' ? true : false}
+          editing={formContext === 'editing'}
           setErrorCreating={setErrorCreating}
           setErrorUpdating={setErrorUpdating}
           isSubmittingForm={isSubmittingForm}
@@ -102,7 +103,7 @@ const ConditionsForm: React.FC<ConditionFormProps> = ({ closeWorkspace, conditio
             </Button>
             <Button className={styles.button} disabled={isSubmittingForm} kind="primary" type="submit">
               {isSubmittingForm ? (
-                <InlineLoading description={t('saving', 'Saving') + '...'} />
+                <InlineLoading className={styles.spinner} description={t('saving', 'Saving') + '...'} />
               ) : (
                 <span>{t('saveAndClose', 'Save & close')}</span>
               )}

packages/esm-patient-conditions-app/src/conditions/conditions-form.scss

@@ -20,6 +20,7 @@
   @include type.type-style("body-compact-01");
   color: $text-02;
   min-height: 1rem;
+  border: 1px solid $ui-03;
 }
 
 .form {
@@ -85,3 +86,9 @@
     margin-block-end: .375rem !important;
   }
 }
+
+.spinner {
+  &:global(.cds--inline-loading) {
+    min-height: 1rem;
+  }
+}

packages/esm-patient-conditions-app/src/conditions/conditions-widget.component.tsx

@@ -17,7 +17,7 @@ import {
 } from '@carbon/react';
 import { WarningFilled } from '@carbon/react/icons';
 import { useFormContext, Controller } from 'react-hook-form';
-import { showSnackbar, useLayoutType, useSession } from '@openmrs/esm-framework';
+import { showSnackbar, useDebounce, useLayoutType, useSession } from '@openmrs/esm-framework';
 import {
   type CodedCondition,
   type ConditionDataTableRow,
@@ -54,7 +54,12 @@ const ConditionsWidget: React.FC<ConditionsWidgetProps> = ({
 }) => {
   const { t } = useTranslation();
   const { conditions, mutate } = useConditions(patientUuid);
-  const { control, watch, getValues, formState } = useFormContext<ConditionFormData>();
+  const {
+    control,
+    watch,
+    getValues,
+    formState: { errors },
+  } = useFormContext<ConditionFormData>();
   const isTablet = useLayoutType() === 'tablet';
   const session = useSession();
   const searchInputRef = useRef(null);
@@ -74,7 +79,9 @@ const ConditionsWidget: React.FC<ConditionsWidgetProps> = ({
   const displayName = getFieldValue(conditionToEdit?.cells, 'display');
   const editableClinicalStatus = getFieldValue(conditionToEdit?.cells, 'clinicalStatus');
   const [selectedCondition, setSelectedCondition] = useState<CodedCondition>(null);
-  const { searchResults, isSearching } = useConditionsSearch(watch('search'));
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
+  const { searchResults, isSearching } = useConditionsSearch(debouncedSearchTerm);
   const handleConditionChange = useCallback((selectedCondition: CodedCondition) => {
     setSelectedCondition(selectedCondition);
   }, []);
@@ -175,19 +182,21 @@ const ConditionsWidget: React.FC<ConditionsWidgetProps> = ({
     searchInputRef.current.focus();
   };
 
+  const handleSearchTermChange = (event: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(event.target.value);
+
   useEffect(() => {
-    if (formState?.errors?.search) {
+    if (errors?.search) {
       searchInputFocus();
     }
     if (isSubmittingForm) {
-      if (Object.keys(formState.errors).length > 0) {
+      if (Object.keys(errors).length > 0) {
         setIsSubmittingForm(false);
-        Object.entries(formState.errors).map((key, err) => console.error(`${key}: ${err} `));
+        Object.entries(errors).map((key, err) => console.error(`${key}: ${err} `));
         return;
       }
       editing ? handleUpdate() : handleCreate();
     }
-  }, [handleUpdate, editing, handleCreate, isSubmittingForm, formState.errors, setIsSubmittingForm]);
+  }, [handleUpdate, editing, handleCreate, isSubmittingForm, errors, setIsSubmittingForm]);
 
   return (
     <div className={styles.formContainer}>
@@ -203,32 +212,39 @@ const ConditionsWidget: React.FC<ConditionsWidgetProps> = ({
                 render={({ field: { onChange, value, onBlur } }) => (
                   <ResponsiveWrapper isTablet={isTablet}>
                     <Search
+                      autoFocus
                       ref={searchInputRef}
                       size="md"
                       id="conditionsSearch"
                       labelText={t('enterCondition', 'Enter condition')}
                       placeholder={t('searchConditions', 'Search conditions')}
-                      className={formState?.errors?.search && styles.conditionsError}
-                      onChange={onChange}
-                      renderIcon={formState?.errors?.search && <WarningFilled />}
+                      className={errors?.search && styles.conditionsError}
+                      onChange={(e) => {
+                        onChange(e);
+                        handleSearchTermChange(e);
+                      }}
+                      renderIcon={errors?.search && <WarningFilled />}
                       onBlur={onBlur}
-                      onClear={() => setSelectedCondition(null)}
+                      onClear={() => {
+                        setSearchTerm('');
+                        setSelectedCondition(null);
+                      }}
                       disabled={editing}
                       value={(() => {
                         if (selectedCondition) {
                           return selectedCondition.display;
                         }
-                        if (getValues('search')) {
+                        if (debouncedSearchTerm) {
                           return value;
                         }
                       })()}
                     />
                   </ResponsiveWrapper>
                 )}
               />
-              {formState?.errors?.search && <p className={styles.errorMessage}>{formState?.errors?.search?.message}</p>}
+              {errors?.search && <p className={styles.errorMessage}>{errors?.search?.message}</p>}
               {(() => {
-                if (!getValues('search') || selectedCondition) return null;
+                if (!debouncedSearchTerm || selectedCondition) return null;
                 if (isSearching)
                   return <InlineLoading className={styles.loader} description={t('searching', 'Searching') + '...'} />;
                 if (searchResults && searchResults.length) {
@@ -251,7 +267,7 @@ const ConditionsWidget: React.FC<ConditionsWidgetProps> = ({
                   <Layer>
                     <Tile className={styles.emptyResults}>
                       <span>
-                        {t('noResultsFor', 'No results for')} <strong>"{getValues('search')}"</strong>
+                        {t('noResultsFor', 'No results for')} <strong>"{debouncedSearchTerm}"</strong>
                       </span>
                     </Tile>
                   </Layer>