revert back to use Dropdown for consistency

openmrs · Oct 30, 2024 · 4049f79 · 4049f79
1 parent efad981
commit 4049f79
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 41 deletions.
diff --git a/src/billable-services/billable-services.scss b/src/billable-services/billable-services.scss
@@ -217,13 +217,3 @@
   grid-template-columns: 16rem 1fr;
 }
 
-.always-visible-overflow-menu {
-  .cds--overflow-menu {
-    opacity: 1 !important;
-    visibility: visible !important;
-  }
-
-  .cds--overflow-menu-options__btn {
-    display: block !important;
-  }
-}
diff --git a/src/billable-services/create-edit/add-billable-service.component.tsx b/src/billable-services/create-edit/add-billable-service.component.tsx
@@ -10,7 +10,6 @@ import {
   Search,
   TextInput,
   Tile,
-  Select,
 } from '@carbon/react';
 import { navigate, showSnackbar, useDebounce, useLayoutType } from '@openmrs/esm-framework';
 import { Add, TrashCan, WarningFilled } from '@carbon/react/icons';
@@ -318,27 +317,16 @@ const AddBillableService: React.FC<{ editingService?: any; onClose: () => void }
                 name={`payment.${index}.paymentMode`}
                 render={({ field }) => (
                   <Layer>
-                    <label className="selectLabel">Payment Method</label>
-                    <select
-                      onChange={(e) => {
-                        const selectedMode = paymentModes.find((mode) => mode.uuid === e.target.value);
-                        field.onChange(selectedMode?.uuid);
-                      }}
-                      aria-label={t('selectPaymentMethod', 'Select payment method')}
-                      value={field.value || ''}
-                      className={`${styles.largeSelect} ${errors?.payment?.[index]?.paymentMode ? 'invalid' : ''}`}>
-                      <option value="" disabled>
-                        {t('paymentMode', 'Payment Mode')}
-                      </option>
-                      {paymentModes?.map((mode) => (
-                        <option key={mode.uuid} value={mode.uuid}>
-                          {mode.name}
-                        </option>
-                      ))}
-                    </select>
-                    {errors?.payment?.[index]?.paymentMode && (
-                      <span className="error-text">{errors.payment[index].paymentMode.message}</span>
-                    )}
+                    <Dropdown
+                      onChange={({ selectedItem }) => field.onChange(selectedItem.uuid)}
+                      titleText={t('paymentMode', 'Payment Mode')}
+                      label={t('selectPaymentMethod', 'Select payment method')}
+                      items={paymentModes ?? []}
+                      itemToString={(item) => (item ? item.name : '')}
+                      selectedItem={paymentModes.find((mode) => mode.uuid === field.value)}
+                      invalid={!!errors?.payment?.[index]?.paymentMode}
+                      invalidText={errors?.payment?.[index]?.paymentMode?.message}
+                    />
                   </Layer>
                 )}
               />

diff --git a/src/billable-services/create-edit/add-billable-service.scss b/src/billable-services/create-edit/add-billable-service.scss
@@ -129,12 +129,3 @@
     min-height: layout.$spacing-05;
   }
 }
-
-.largeSelect,
-select.largeSelect {
-  width: 100%;
-  height: 2.5em;
-  padding: 0.5em;
-  font-size: 1em;
-  margin-top: 1em;
-}