Updated UX for ValueSetSelect component (#9685)

ohcnetwork · Jan 3, 2025 · 0899ddf · 0899ddf
1 parent 3a4bc68
commit 0899ddf
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/public/locale/en.json b/public/locale/en.json
@@ -1569,7 +1569,7 @@
   "search_medication": "Search Medication",
   "search_patients": "Search Patients",
   "search_resource": "Search Resource",
-  "searching": "Searching",
+  "searching": "Searching...",
   "see_attachments": "See Attachments",
   "select": "Select",
   "select_all": "Select All",

diff --git a/src/components/Questionnaire/ValueSetSelect.tsx b/src/components/Questionnaire/ValueSetSelect.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { cn } from "@/lib/utils";
 
@@ -29,7 +30,6 @@ interface Props {
   value?: Code | null;
   onSelect: (value: Code) => void;
   placeholder?: string;
-  noResultsMessage?: string;
   disabled?: boolean;
   count?: number;
 }
@@ -39,10 +39,10 @@ export default function ValueSetSelect({
   value,
   onSelect,
   placeholder = "Search...",
-  noResultsMessage = "No results found",
   disabled,
   count = 10,
 }: Props) {
+  const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useDebouncedState("", 500);
 
@@ -83,8 +83,13 @@ export default function ValueSetSelect({
           />
           <CommandList>
             <CommandEmpty>
-              {searchQuery.isFetching ? "Searching..." : noResultsMessage}
+              {search.length < 3
+                ? t("min_char_length_error", { min_length: 3 })
+                : searchQuery.isFetching
+                  ? t("searching")
+                  : t("no_results_found")}
             </CommandEmpty>
+
             <CommandGroup>
               {searchQuery.data?.results.map((option) => (
                 <CommandItem