Fixes text from overflowing in select menu dropdowns (#7792)

* fixes text overflowing for select menu dropdowns * avoid any's
ohcnetwork · May 14, 2024 · 2f2c6a0 · 2f2c6a0
1 parent 8ede3f5
commit 2f2c6a0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/Components/Form/SelectMenuV2.tsx b/src/Components/Form/SelectMenuV2.tsx
@@ -102,7 +102,7 @@ const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
                         {value.icon}
                       </div>
                     )}
-                    <p className="ml-2.5 whitespace-nowrap break-all text-sm font-medium">
+                    <p className="ml-2.5 whitespace-pre-wrap text-start text-sm font-medium">
                       {value.selectedLabel}
                     </p>
                   </div>

diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
@@ -29,7 +29,7 @@ import CollapseV2 from "../Common/components/CollapseV2";
 import ConfirmDialog from "../Common/ConfirmDialog";
 import DateFormField from "../Form/FormFields/DateFormField";
 import DialogModal from "../Common/Dialog";
-import { DupPatientModel } from "../Facility/models";
+import { DistrictModel, DupPatientModel, WardModel } from "../Facility/models";
 import DuplicatePatientDialog from "../Facility/DuplicatePatientDialog";
 import {
   FieldError,
@@ -64,6 +64,7 @@ import routes from "../../Redux/api.js";
 import request from "../../Utils/request/request.js";
 import SelectMenuV2 from "../Form/SelectMenuV2.js";
 import Checkbox from "../Common/components/CheckBox.js";
+import { ILocalBodies } from "../ExternalResult/models.js";
 
 const Loading = lazy(() => import("../Common/Loading"));
 const PageTitle = lazy(() => import("../Common/PageTitle"));
@@ -205,9 +206,9 @@ export const PatientRegister = (props: PatientRegisterProps) => {
   const [isDistrictLoading, setIsDistrictLoading] = useState(false);
   const [isLocalbodyLoading, setIsLocalbodyLoading] = useState(false);
   const [isWardLoading, setIsWardLoading] = useState(false);
-  const [districts, setDistricts] = useState<any[]>([]);
-  const [localBody, setLocalBody] = useState<any[]>([]);
-  const [ward, setWard] = useState<any[]>([]);
+  const [districts, setDistricts] = useState<DistrictModel[]>([]);
+  const [localBody, setLocalBody] = useState<ILocalBodies[]>([]);
+  const [ward, setWard] = useState<WardModel[]>([]);
   const [ageInputType, setAgeInputType] = useState<
     "date_of_birth" | "age" | "alert_for_age"
   >("date_of_birth");
@@ -1749,9 +1750,9 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                     }
                                     disabled={!field("district").value}
                                     options={localBody}
-                                    optionLabel={(o: any) => o.name}
-                                    optionValue={(o: any) => o.id}
-                                    onChange={(e: any) => {
+                                    optionLabel={(o) => o.name}
+                                    optionValue={(o) => o.id}
+                                    onChange={(e) => {
                                       field("local_body").onChange(e);
                                       field("ward").onChange({
                                         name: "ward",